Question

我想将列移到左侧，并且应该在两者之间设置固定的大小。

现在看起来像这样：http://i.imgur.com/K1PyTt2.png

希望我能得到这样的结果：http://i.imgur.com/EF2oxhn.png

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：

<div class="table" >
    <table>
        <tr>
             <td>
               ID#
             </td>
             <td>
               Name
             </td>
             <td>
               Edit
             </td>
              <td>
               Delete
             </td>
       </tr>

<tr><td><?php echo $tags_id ?></td><td><?php echo $name ?></td> <td><?php echo "<a href='edit.php?id=$tags_id'>Edit</a>"; ?></td> <td><?php echo "<a href='delete.php?id=$tags_id'>Delete</a>"; ?></td></tr>

       </table>
</div>

我希望有人可以提前帮助。

Answer 1

.table {
    width:50%;
}

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

http://jsfiddle.net/xzzcrouf/3/。你也可以试试这个更好的造型 - http://jsfiddle.net/xzzcrouf/4/

Answer 2

您没有告诉我们您使用的是哪个版本的HTML，但以下内容适用于任何版本。添加＆lt; colgroup＆gt;作为你的表元素的第一个子元素：

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

这会将列的宽度固定为一定数量的字符。如果这不符合您的预期，请尝试在＆lt; table＆gt;上设置width属性。并使用＆lt; col /＆gt;中的百分比宽度：

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

Answer 3

您已将width:100%设置为表格，这意味着所有列都将尝试跨越所有可用宽度。所以你可以从你的表中删除它

Js Fiddle Demo

Answer 4

请尝试以下操作： Demo

.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：

<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>

希望这能帮到你！

Answer 5

我从CSS中的表中删除了width:100%。

HTML：

<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>

Js Fiddle Demo

也许有更好的方法，但它会按照我想要的方式显示。

感谢@pgoetz分享有关 colgroup 的信息。

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

5 个答案: