1. 首页
  2. 问题列表
  3. 超文本标记语言表格设置一列宽度，其余列适合内容，而表格宽度设置为自动
提问者：小点点

超文本标记语言表格设置一列宽度，其余列适合内容，而表格宽度设置为自动


我有一个宽度为1280px的父容器，溢出设置为auto。这个元素的子元素是一个有14列的表格，我希望每一列都适合设置为nowrap的空白内容。这将使表格比父容器的宽度宽，并且会显示一个滚动条。但是我希望一列具有400px的固定宽度，并将空白设置为正常，以便文本内容在宽度超过400px时会换行。我如何实现这一点？？我玩过table-布局：固定，但是没有硬编码表格宽度，我无法设置列宽度。


共2个答案

匿名用户

我看到的最简单的是重置显示，因为它是关于空白无处不在，但对于一列甚至某处的单个单元格，这一列或单元格将至少是一行文本，不应该被注意太多。

下面3个例子

table {
  table-layout:fixed;/* or not */
}
td {
  white-space:nowrap;
  border:solid;
  background:lightgreen;
}
table:first-of-type td:first-child,/* first example */
table + table  td:nth-child(2) ,/* second example , another column selected */
table + table + table   td:nth-child(5) /* third example, 2 columns BUT NOT side by side */{
  display:block;
  width:100px;
  white-space:normal;
  background:lightblue;
}
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>

匿名用户

如果那列有id，那么也许可以试试这个

<!-- your code for table -->
<script>
    var i = document.getElementById("column-id");
    i.style.width = "400px";
    i.style.whiteSpace = "normal";
</script>

这就是我会尝试的，我希望这能有所帮助。

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS