HTML表格 - 表格宽度100％时保持列宽比例

Question

默认的html Hibernate: select nextval ('hibernate_sequence') Hibernate: insert into friendship (from_id, to_id, id) values (?, ?, ?) Hibernate: delete from friendship where id=? Hibernate: select nextval ('hibernate_sequence') Hibernate: insert into friendship (from_id, to_id, id) values (?, ?, ?) Hibernate: delete from friendship where id=? 元素似乎设置了我希望/期望直接开箱即用的列宽。当我尝试将整个表格宽度设置为100％时会出现问题，在这种情况下，每个合理大小的列都会捕捉到总宽度的1 / n％。

以下是我所谈论的一个例子

第二张桌子看起来很糟糕。绝对不需要在第一列中开始包装文本，尤其是当现在更多可用空间时。

唯一的区别是第二个表设置为<table>。当然，您可以在每个列上设置精确的像素或百分比尺寸以相对于彼此进行缩放，但是这会开始对每个列的大小进行一些猜测。在这种情况下，只有查看或编辑链接的列的大小可以非常小，并且不需要占用任何额外的内容，而有些可能会使用一些更多的成长空间，例如可能具有其他更长/更短值的名称/类型。

问：我可以以某种方式维持比例列格式化，同时允许整个表格的大小为可用宽度的100％吗？

Demo in jsFiddle

Stack Snippets中的演示

＆＃13;

＆＃13;

width:100%

＆＃13;

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是您添加到table-layout: fixed标记的table规则，只需将其删除即可。来自w3schools：

  

fixed：修复了表格布局算法：

     

  
• 水平布局仅取决于表格的宽度和列的宽度，而不取决于单元格的内容
  
• 允许浏览器以比自动表格布局更快的速度布置表格
  
• 一旦收到第一行，浏览器就可以开始显示表格
  

table {
    border-collapse: collapse;
    border-spacing: 0;
    /*table-layout: fixed;*/
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}

<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

Answer 2

喜欢这个吗？

注意： 我从两个表中删除了width:100%，如果没有此设置，CSS效果最佳！

守则来自旧的SO帖子。请参阅下文。

SO Answer

CODE SNIPPET

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

table th {
  background: lightblue;
}

table th,
table td {
  border: lightgrey 1px solid;
  padding: .1em 0.2em;
}
tr td:last-child{
    width:1%;
    white-space:nowrap;
}

＆＃13;

<h4>Width Not Set</h4>

<table id="example1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

















<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About this SO question:
  <a href='https://stackoverflow.com/q/46247387/1366033'>
        HTML Table - Maintain column width proportion when table width 100%
    </a>
</div>
https://jsfiddle.net/KyleMit/dabpc4sL/

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是尝试解决方案

利用表的初始呈现来确定相对列大小。循环遍历每个并明确设置大小，以便在将表以编程方式调整为100％后，它们将保持相同的比例

function LockColumnWidthAndResize($table) {
    $table.find('tr th').each(function() {
      $(this).width($(this).width())
    });
    $table.width("100%");
}

优点：提前不要求内容宽度进行硬编码

缺点：Little Kludgy并且有一点点无格式内容。

Demo in jsFiddle

StackSnippets中的演示

＆＃13;

＆＃13;

$(function() {

  LockColumnWidthAndResize($('#example2'))

  function LockColumnWidthAndResize($table) {
    $table.find('tr th').each(function() {
      $(this).width($(this).width())
    });
    $table.width("100%");
  }
  
});

＆＃13;

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width - Set 100% dynamically</h4>

<table id="example2">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;