首页 文章

除最后一列外，如何将表格单元格宽度设置为最小值？

提问于
浏览 次
95

我有一张宽100％的 table . 如果我将 <td> 放入其中，它们会以相等长度的列展开 . 但是，我希望除了last之外的所有列都具有尽可能小的宽度，而不包装文本 .

我首先做的是我在所有 <td> 中设置了 width="1px" ，除了最后一个（尽管已弃用，但 style="width:1px" 没有任何效果），这在我的列中有多字数据之前一直正常工作 . 在这种情况下，为了保持尽可能小的长度，它包裹了我的文本 .

让我来证明一下 . 想象一下这张表：

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

无论我尝试什么，我一直得到的是这样的：

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

或者（即使我设置 style="whitespace-wrap:nowrap" ）这个：

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

我想先得到我提出的表格 . 我该如何实现这一目标？ （我宁愿坚持标准并使用CSS . 老实说，如果IE还没有实现部分标准，我真的不在乎）

更多解释：我需要的是保持列尽可能短而不包装单词（最后一列应该尽可能大，以使表格宽度实际达到100％） . 如果您了解LaTeX，我想要的是当您将宽度设置为100％时，表格自然会出现在LaTeX中 .

注意：我找到this但它仍然给我与上一张表相同 .

html css table

6 回答

  • 86

    whitespace-wrap: nowrap 无效css . 这是 white-space: nowrap 你正在寻找 .

    回复于
  • 31

    这至少适用于谷歌浏览器 . （jsFiddle）

    HTML:

    <table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">last column</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">other stuff</td>
        <td class="expand">again, last column</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of </td>
        <td class="shrink">these</td>
        <td class="expand">rows</td>
    </tr>
</table>

    CSS:

    table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td.shrink {
    white-space:nowrap
}
table td.expand {
    width: 99%
}
    回复于
  • 3
    td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

    通过使用上面的代码，最后一个表格单元将尽可能大，并且您将阻止之前的表格包装 . 这与给出的其他答案相同，但方式更有效 .

    回复于
  • 1

    略有不同的主题，但也许它可以帮助像我一样偶然发现这个问题的人 .
    （我刚看到Campbeln的评论，他在下面写了我的答案之后就提出了这个建议，所以这基本上是他评论的详细解释）

    我反过来遇到了这个问题：我希望将一个表格列设置为最小宽度，而不会在空白处打破它（以下示例中的最后一列），但另一个宽度应该是动态的（包括换行符）：

    -----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

    简单方案：

    HTML

    <table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

    CSS

    td.shrink {
  white-space: nowrap;
  width: 1px;
}

    类 shrink 的列仅扩展到最小宽度，但其他列保持动态 . 这是有效的，因为 td 的 td 会自动展开以适合整个内容 .

    示例代码段

    table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

    <table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>
    回复于
  • 43

    您可以通过在 td 中放置 div 标记来设置修复宽度

    table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}

    <table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

    https://jsfiddle.net/8bf17o1v/

    回复于
  • 7

    If you need multiple text lines in table cell.

    请勿使用 white-space: nowrap 使用 white-space: pre; .

    在表格单元格中，避免使用任何代码格式，如新行和缩进（空格），并使用 <br> 设置新的文本行/行 . 像这样：

    <td>element1<br><strong>second row</strong></td>

    Demo on CodePen

    回复于

相关问题