Tailwinds css -如何将表格单元格内容垂直对齐到一行的顶部？

k4ymrczo 于 2023-01-28 发布在其他

关注(0)|答案(1)|浏览(161)

我正在尝试弄清楚如何将表格单元格的数据与表格行的顶部对齐。

<tr className="flex-1 items-center align-top">

    <td className=" py-1 pl-1 pr-1 text-sm sm:pl-6">
       <div className="flex-1 items-center align-top">
           <div className="flex-1 items-center align-top">
                <p className="flex-1 items-center align-top">
                    title 
                </p>
                <p className="flex-1 align-top">
                    short multi line sentence about one third the length of the sentence in the next column, I want both cells to align to the top.
                </p>
           </div>
        </div>
    </td>

我看过这个article，它说如果我想垂直对齐数据，我必须在flex类中使用items-center。我试过这个，但是内容仍然呈现在垂直中心。
下一列大约有两倍的数据，因此此列中的单元格数据显示在垂直中心。我希望它与行的顶部对齐。
我该怎么做呢？

css

来源：https://stackoverflow.com/questions/75204278/tailwinds-css-how-can-i-vertically-align-table-cell-content-to-the-top-of-a-ro

1条答案

按热度按时间

iyr7buue1#

正如John Li所指出的，您可能希望使用flex，因为如果flex-1不在包含flex的 Package 器中，它就没有用。
实际上并不需要所有的 Package 器div，单元格内容应该与顶部对齐，而不使用items-或align-。

<table>
  <tr class="flex gap-4 p-1 text-sm sm:pl-6">
    <td>
      <p>title</p>
      <p>short multi line sentence about one third the length of the sentence in the next column, I want both cells to align to the top.</p>
    </td>
    <td>
      <p>Longer multiline sentence...</p>
    </td>
  </tr>
</table>

此处为沙箱：https://play.tailwindcss.com/QPUuacC4Rj

赞(0）回复(0）举报 2023-01-28

我来回答

Tailwinds css -如何将表格单元格内容垂直对齐到一行的顶部？

1条答案

相关问题

热门标签

最新问答