Question

我有一个固定列数的表。我希望其中3列具有相同的宽度，但我不知道它是什么，因为我不知道其他2的宽度。我希望浏览器尽可能地使用它来渲染它约束我的三个指定列都具有相同的宽度，

这是一个例子。我希望第2,3,4列全部具有相同的宽度，我不介意它是什么，只是它们是相同的。

<table>
  <tr>
    <td>Could be short or maybe it could be long</td>
    <td class="samewidth">Col2 Long Text</td>
    <td class="samewidth">Col3 Some More Long Text</td>
    <td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
    <td>Could be short or long</td>
  <tr>
</table>

我只能通过固定的百分比来做我想要的事情

td.samewidth {
  width: 25%;
  overflow: hidden;
}

这是我能做的最好的小提琴，它将三列连接起来，宽度为25％。

https://jsfiddle.net/GrimRob/zugnyzb4/

我理想的做法是摆脱宽度：25％并放置一些东西，但是什么？

Answer 1

这样做：

td.samewidth {
  width: 33%;
  overflow: hidden;
}

<table>
  <tr>
    <td>Could be short or maybe it could be long</td>
    <td>
      <table>
        <tr>
          <td class="samewidth">Col2 Long Text</td>
          <td class="samewidth">Col3 Some More Long Text</td>
          <td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
         </tr>
      </table>
    </td>
    <td>Could be short or long</td>
  </tr>
</table>

因为你的＆＃34; samewidh＆＃34;列将固定33％，您不会遇到其他行未对齐的问题。至多你必须添加！important。

Answer 2

很难为您的问题找到答案，因为我不确定您希望如何根据内容调整列的大小。 Flexbox可以替代您。这是CSS和Codepen，据我所知，你要完成的是什么。

table {
  width: 100%;
  border: 1px solid black;
}

tr {
  display: flex;
}

td {
  border: 1px solid black;
}

td.samewidth {
/*   width: 25%; */
  overflow: hidden;
  flex-grow: 1;
  display: inline-block;
  flex-basis: 0;
}

td:not(.samewidth) {
  flex-basis: content;
}

http://codepen.io/anon/pen/bpobGq

在此示例中，第1列和第5列（不是相同宽度）根据提供的内容确定宽度。具有.samewidth类的列将平均增长以填充父容器中可用的剩余空间（在本例中为tr）。

这里你真的有很多选择，你希望列调整大小。您可以为第1列和第5列设置固定宽度，为内容设置大小（如示例中所示），或者使这些增长以填充空间。希望这能让你走上正确的道路。

这是Flexbox的快速指南。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Html表的表格列宽一起

2 个答案: