将表格内容集中到页面的一部分，同时将行溢出到屏幕边缘

Question

我希望我的表格看起来有一种特定的方式，但我正在努力弄清楚如何在 HTML/CSS/Bootstrap 中实现它。 我希望它的列在屏幕的中心 85% 左右，表格本身延伸到屏幕的 100%。 它应该看起来像这样： ========|Column|Column|Column|======== ========|Data |Data |Data |========

“====”基本上是由行边界分隔的空白空间。

有什么方法可以实现吗？

目前，我的表仅限于引导容器，因此它的两边都有固定的边距。如果我去掉容器，表格占据了 100% 的页面，但列也从边缘开始。

任何帮助将不胜感激！

Answer 1

制作 5 列并将类分配给外部列，您现在可以在那里设置宽度。如果您希望中间为 85%，那么每个外列将是 7.5% 宽

table {
  width: 100%;
}
.outside {
  width: 7.5%;
}
td {
  border: 1px solid green;
  text-align: center;
}

<table>
  <tr>
    <td class="outside">test2</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td class="outside">test2</td>
  </tr>
  <tr>
    <td class="outside">test2</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td class="outside">test2</td>
  </tr>
  <table>