Html 如何在表中向左移动列？

我想把列移到左边，而且中间应该有一个固定的大小

现在看起来是这样的：

希望我能得到这个结果：

CSS代码：

.table {
    width:100%;
}

.table table{
    border-collapse: collapse;
    width:100%;
}

.table td{
    padding-left: 5px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
    font-family: Arial,Helvetica,sans-serif;
}

.table tr:nth-child(odd){ background-color:#EFEFEF; }
.table tr:nth-child(even)    { background-color:#ffffff; }

.table tr:first-child td{
    padding-left: 5px;
    background-color:#EFEFEF;
    text-align:left;
    color:#868686;
    font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 16px;
    margin-bottom: 6px;
}

/* Border line in the middle (first-child) Example: 1 | 2 | 3 */
.table tr:first-child td:not(:last-child) { border-right: 1px solid #868686;}

HTML:

身份证#
名称
编辑
删除

我希望有人能帮忙，提前谢谢

.table {
    width:50%;
}

这应该可以解决问题。这是一把小提琴

。你也可以试试这个以获得更好的造型-

---

您没有告诉我们您使用的HTML版本，但以下内容在任何版本中都适用。添加a作为表元素的第一个子元素，如下所示：

<table>
  <colgroup>
    <col width="20em"/>
    <col width="10em"/>
    <col width="10em"/>
  </colgroup>
</table>

这将把列的宽度固定为一定数量的字符。如果这不符合您的要求，请尝试在上设置宽度属性，并在宽度中使用百分比：

---

您已将

宽度：100%

设置到表中，这意味着所有列将尝试跨越所有可用宽度。所以你可以把它从你的桌子上移除

像这样试试：

.table {
    width:100%;
}
.table table {
    border-collapse: collapse;
    width:100%;
}
.table tr {
    clear:both;
}
.table tbody td, .table th {
    display:inline;
    width:auto;
    text-align:left;
    padding: 1px 10px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
}
.table tbody tr:nth-child(odd) {
    background-color:#ffffff;
}
.table tbody tr:nth-child(even) {
    background-color:#EFEFEF;
}
.table thead tr {
    background-color:#EFEFEF;
}
.table thead tr th {
    color:#868686;
    border-right: 1px solid #868686;
}

HTML:

身份证#
名称
编辑
删除
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

---

希望这对你有帮助

我从CSS中的表中删除了

宽度：100%

HTML:

身份证#
名称
编辑
删除
1.
名称
编辑
删除

也许有更好的方法，但它是我想要的

---

感谢@pgoetz分享有关colgroup

的信息。请记住

：not

不完全受支持。您也可以发布HTML吗？表不是块元素。它应该只占内容的空间。你可以发布一篇文章吗？你应该知道你可以在问题中嵌入图片。不需要上传到另一个网站。我不想将宽度更改为50%，如果可能的话，只将列向左移动？很接近，每个标签下都有文本吗？现在你的最后一个JSFIDLE看起来是这样的：这就是另一个链接使用更好的样式所做的-我尝试了这个，但我得到了上图所示的结果。如果一列中的文本太长，其余的将被推送。是的，我知道，但它应该是100%宽度，如果可能的话，列应该向左对齐？嗨-如果我的回答是肯定的您的问题，标记为已回答，以便下一个提出相同问题的人可以从讨论中受益。谢谢

<table width="40%">
  <colgroup>
    <col width="50%"/>
    <col width="25%"/>
    <col width="25%"/>
  </colgroup>
</table>

.table {
    width:100%;
}
.table table {
    border-collapse: collapse;
    width:100%;
}
.table tr {
    clear:both;
}
.table tbody td, .table th {
    display:inline;
    width:auto;
    text-align:left;
    padding: 1px 10px;
    color: #000000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
}
.table tbody tr:nth-child(odd) {
    background-color:#ffffff;
}
.table tbody tr:nth-child(even) {
    background-color:#EFEFEF;
}
.table thead tr {
    background-color:#EFEFEF;
}
.table thead tr th {
    color:#868686;
    border-right: 1px solid #868686;
}

<div class="table">
    <table>
        <thead>
            <tr>
                <th>ID#</th>
                <th>Name</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table" >
    <table>
        <colgroup>
            <col style="width:50px">
            <col style="width:250px">
            <col style="width:180px">
            <col style="width:1500px">
        </colgroup>
        <tr>
            <td>ID#</td>
            <td>Name</td>
            <td>Edit</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>1</td>
            <td>NAME</td> 
            <td>EDIT</td> 
            <td>DELETE</td>
        </tr>
    </table>
</div>