Question

我想知道，当列的宽度适合内容时，是否可以均匀分布表格的列。

我的表格有3列或4列。列的内容是动态的，因此可以随着不同的数据而增长。不过，它基本上是一列，但其中将包含大量数据。

请考虑以下三个示例表：

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

我正在尝试使第一列的内容从最左边开始，最后一列的内容从最右边结束。剩余的内容应在桌子上均匀分布。

但是，我尝试用flexbox div代替表创建相同的结果。这样可以均匀地分配内容，但是，我无法在表头的底部创建黑色边框。

示例表中的内容应按照屏幕快照中的草图均匀分布。

如何根据其内容分配表格列？

FIDDLE

Answer 1

设置以下内容。

table {
  table-layout:fixed;

} 
table td {
   width:1%;
}

Answer 2

您是否尝试过width =“ 100％”？

<c:forEach items="${sessionScope.form.manufacturerList}" var="manufacturer">
             <a href="products?limit=${form.productMax}&sort=${form.sort}&price-form=${form.minPrice}&price-to=${form.maxPrice}&manufacturer-checkbox=${manufacturer}&categories-checkbox=${categoryList}">
        </c:forEach>

根据您的小提琴：

尝试在最后一个孩子的末尾添加固定宽度：

<table width="100%">
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th width="200px">Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table width="100%">
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th width="200px">This is the title for<br> of blok 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table width="100%">
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th width="200px">Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/qjx9wceh/6/

Answer 3

将表格的width设置为100%

还将表的layout属性设置为fixed
这些属性是

表布局：自动|固定|初始|继承；

参考链接： https://www.w3schools.com/cssref/pr_tab_table-layout.asp

您更新的小提琴-> https://jsfiddle.net/qjx9wceh/4/

table
{
width:100%; 
table-layout:fixed; 
text-align:left;
}

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

是否可以平均分配宽度等于其内容的表列？

3 个答案: