Question

尝试搜索高低，但只找到感觉效率低下的半解决方法。

我在div中有一张表，我不想在div之外扩展。

在桌子内我有7列;第1列+ 3-7列（＆＃39;小＆＃39;列）我想占用他们需要的空间以适应他们的文本（状态，用户名，类别等，它们会占用什么，20-表格宽度的30％和第2列（＆＃39;大＆＃39;列）应占用剩余的可用空间，但不会（！）扩展表格大小，使其超出父div。

我可以使用table-layout: fixed;进行半工作，但是这使得所有容器只占用他们需要的空间扩展为空白，我会喜欢不必设置特定的大小所有专栏，但我写的是“小＆＃39;列占据了他们需要的大小（但不是更多）和“大”的大小。列占用剩余空间。

最理想的是，我希望在我的custom.css中有两个类，名为small和large（或其他），我将大类应用于大列（尽可能增加大小，但不要＃39} ; t使表格移到父div之外。如果需要，用省略号隐藏溢出文本，否则只有空格，因此行占据表格宽度的100％）和“小”表。我添加到所有小列的类占用的空间足以满足文本的需要（即white-space: nowrap;），但没有额外的空格（我使用table-layout: fixed;获得）。

TL; DR：

不使用table-layout:fixed（不要专门设置列宽）。

包含多个列的表，除了一个列之外的所有列都占用了他们需要的空间但不多（white-space: nowrap）。

一个大的td应该占用剩下的空间，但不要增加桌子的大小，也不要扩展到桌子外面。如果文本太多，请使用溢出省略号。

编辑：

JSFiddle：https://jsfiddle.net/mwsqnmgw/1/

HTML

<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Column</td>
    </tr>
</table>

CSS

.small-td{
  width:1%;
    white-space: nowrap;
}
.large-td{
  width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

编辑：

终于设法解决了它。在我删除了一些测试代码之后会写修复，所以我知道实际上是做了什么。

编辑：

我要做的是添加max-width：1px;到了大的＆＃39;列（max-width: 1%似乎不会起作用），所以我有两个类添加到th和所有td中。

.small{
    width:1%;
    white-space: nowrap;
}

.large{
    max-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 1

这是你需要的吗？对于table，max-width已定义。

＆＃13;

.container {
  width: 100%;
  border: thin solid red;
}

table {
  max-width: 100%;
}

td {
  vertical-align: top;
  border: thin solid blue;
}

＆＃13;

<div class="container">
  <table>
    <tr>
      <td>user</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo metus, pellentesque ut dui nec, rhoncus efficitur ipsum. Fusce facilisis urna in auctor commodo. Nulla non lectus sed purus porttitor vulputate. Cras aliquam tortor ut tempor commodo.
        Curabitur aliquet magna vitae tellus condimentum, sit amet commodo quam vulputate. Morbi eros felis, tincidunt ut tortor eget, tincidunt iaculis ex. Aliquam luctus orci eget est congue viverra. Curabitur auctor erat eu purus bibendum, eget aliquet
        tellus scelerisque. In lacinia risus vel erat pretium, id sollicitudin nisl feugiat. Maecenas eu efficitur nulla, non viverra sem. Proin quis finibus lorem, ac rhoncus erat. Curabitur odio purus, condimentum eu neque vitae, aliquam mattis libero.
        Cras eleifend gravida velit non ultricies. Aliquam vel vestibulum quam. Interdum et malesuada fames ac ante ipsum primis in faucibus.</td>
      <td>category</td>
      <td>product</td>
      <td>address</td>
      <td>zipcode</td>
      <td>place</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 2

这样的事可能吗？

＆＃13;

table, tr {
  border: 1px solid black;
  width: 100%;
}

td {
  height: 15px;
  border: 1px solid black;
}

.smallCol {
  width: 5% !important;
}

＆＃13;

<div id="container">
<table>
<tr>
<td class="smallCol"></td>
<td></td>
<td class="smallCol"></td>
<td class="smallCol"></td>
<td class="smallCol"></td>
<td class="smallCol"></td>
<td class="smallCol"></td>
</tr>
</table>
</div>

＆＃13;

可能有更好的方法来达到这个结果，但这就是现在的诀窍。如果有任何问题，请告诉我。希望它有所帮助。

HTML / CSS表使所有列占用所需的空间，除了中间的一个占用休息空间，而不扩展父级之外的表大小

2 个答案: