如何将多个列相对于整个表格居中

Question

这是我的目标：

为了实现这一目标，我在左右添加了一列，只是将内容压入中间，但副作用是它也压榨文本内容：

我们如何做到这一点，但仍然优先考虑文本内容？

这是我的努力： （Also in jsbin）

  
  
  
  <style>
    
    table {border-collapse: collapse; width: 100%}
    tr:nth-child(odd) {background-color:silver}
    td {padding: 1rem}
    
  </style>
  
  
  
  
  <table class="">
    <thead>
        <tr class="">
            <th style="width:50%"></th>
            <th class="">Position</th>
            <th class="">Description</th>
            <th style="width:50%"></th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
        <tr class="">
            <td></td>
            <td style="text-align:right">1.</td>
            <td class="">some content that shouldn't nextline</td>
            <td></td>
        </tr>
    </tbody>
</table>
  
  
  

请注意，whitespace: nowrap不是解决方案，因为它可能会使文本内容从视口溢出。因此，我们确实需要进行环绕操作，但前提是视口中没有更多的水平空间了：

Answer 1

像这样吗？

table {border-collapse: collapse; width: 100%}
        thead {width:100%;}
        tbody{width:100%;}
        tr{width:100%;}
        tr:nth-child(odd) {background-color:silver}
        td,th {padding: 1rem 12.5%; text-align:center;width:50%;}

<table class="">
        <thead>
            <tr class="">
                <th class="">Position</th>
                <th class="">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
            <tr class="">
                <td>1.</td>
                <td class="">some content that shouldn't nextline</td>
            </tr>
        </tbody>
    </table>