HTML Table - 当table宽度为100%时保持列宽比例
HTML Table - Maintain column width proportion when table width 100%
默认的 html <table>
元素似乎是如何设置列宽的,我 want/expect 直接开箱即用。当我尝试将整个 table 宽度设置为 100% 时会出现问题,在这种情况下,每个合理大小的列都会对齐总宽度的 1/n %。
这是我所说的例子
第二个 table 看起来很糟糕。绝对没有必要在第一列开始换行,尤其是现在有 更多 个可用空间时。
唯一不同的是第二个table设置为width:100%
。当然,您可以在每一列上设置精确的像素或百分比尺寸以相对于彼此缩放,但这开始硬编码一些关于每一列将有多大的猜测工作。在这种情况下,只有 View 或 Edit 链接的列可以非常小,不需要占用任何额外空间,而一些可以使用更多的空间来增长,例如 Name/Type 可能有其他 longer/shorter 值。
问:我能否以某种方式保持比例列格式,同时允许整个 table 的大小为可用宽度的 100%?
Demo in jsFiddle
堆栈片段中的演示
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>
像这样?
注意: 我从两个表中删除了 width:100%
,没有这个 CSS 效果最好设置!
代码来自旧 SO post。参考下文。
SO Answer
代码片段:
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;
}
<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='
HTML Table - Maintain column width proportion when table width 100%
</a>
</div>
https://jsfiddle.net/KyleMit/dabpc4sL/
这是解决方案的尝试
按原样利用 table 的初始呈现来建立相对列大小。遍历每个并明确设置大小,以便在 table 以编程方式将大小调整为 100%
后它们将保持相同的比例
function LockColumnWidthAndResize($table) {
$table.find('tr th').each(function() {
$(this).width($(this).width())
});
$table.width("100%");
}
优点:不需要提前对内容的宽度进行硬编码
缺点:有点笨拙,内容有点乱。
Demo in jsFiddle
StackSnippets 中的演示
$(function() {
LockColumnWidthAndResize($('#example2'))
function LockColumnWidthAndResize($table) {
$table.find('tr th').each(function() {
$(this).width($(this).width())
});
$table.width("100%");
}
});
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;
}
<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>
问题是您添加到 table
标签的 table-layout: fixed
规则,只需将其删除即可。来自 w3schools:
fixed
: Fixed table layout algorithm:
- The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
- Allows a browser to lay out the table faster than the automatic table layout
- The browser can begin to display the table once the first row has been received
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>
默认的 html <table>
元素似乎是如何设置列宽的,我 want/expect 直接开箱即用。当我尝试将整个 table 宽度设置为 100% 时会出现问题,在这种情况下,每个合理大小的列都会对齐总宽度的 1/n %。
这是我所说的例子
第二个 table 看起来很糟糕。绝对没有必要在第一列开始换行,尤其是现在有 更多 个可用空间时。
唯一不同的是第二个table设置为width:100%
。当然,您可以在每一列上设置精确的像素或百分比尺寸以相对于彼此缩放,但这开始硬编码一些关于每一列将有多大的猜测工作。在这种情况下,只有 View 或 Edit 链接的列可以非常小,不需要占用任何额外空间,而一些可以使用更多的空间来增长,例如 Name/Type 可能有其他 longer/shorter 值。
问:我能否以某种方式保持比例列格式,同时允许整个 table 的大小为可用宽度的 100%?
Demo in jsFiddle
堆栈片段中的演示
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>
像这样?
注意: 我从两个表中删除了 width:100%
,没有这个 CSS 效果最好设置!
代码来自旧 SO post。参考下文。
SO Answer
代码片段:
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;
}
<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='
HTML Table - Maintain column width proportion when table width 100%
</a>
</div>
https://jsfiddle.net/KyleMit/dabpc4sL/
这是解决方案的尝试
按原样利用 table 的初始呈现来建立相对列大小。遍历每个并明确设置大小,以便在 table 以编程方式将大小调整为 100%
后它们将保持相同的比例function LockColumnWidthAndResize($table) {
$table.find('tr th').each(function() {
$(this).width($(this).width())
});
$table.width("100%");
}
优点:不需要提前对内容的宽度进行硬编码
缺点:有点笨拙,内容有点乱。
Demo in jsFiddle
StackSnippets 中的演示
$(function() {
LockColumnWidthAndResize($('#example2'))
function LockColumnWidthAndResize($table) {
$table.find('tr th').each(function() {
$(this).width($(this).width())
});
$table.width("100%");
}
});
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;
}
<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>
问题是您添加到 table
标签的 table-layout: fixed
规则,只需将其删除即可。来自 w3schools:
fixed
: Fixed table layout algorithm:
- The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
- Allows a browser to lay out the table faster than the automatic table layout
- The browser can begin to display the table once the first row has been received
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>