Question

我希望所有100个对齐，但红色框使它不对齐。我试过填充单个单元格，但它会影响整行。我该怎么做？

它说我的问题主要是代码，所以我也要添加这一段。

HTML：

    <div id="marg">
    <div class="wrap">
      <table border="1" class="fixed">
        <col style="width:90px;" />
        <col style="width:160px;" />
        <col style="width:100px;" />
        <col style="width:115px;" />
        <col style="width:100px;" />
        <col style="width:130px;" />
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td>100</td>
            <td>100</td>
            <td style="padding-top:2em">100 <div class="good">Good</div></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>    
  </div>

的CSS：

table.fixed td, th {
    overflow: hidden;
}

#marg .wrap table table {
    width: 100%}

#marg table.fixed {
    table-layout: fixed;
    font-family: 'Open Sans', sans-serif;
    font-size:.95em;
}

#marg table {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: show;
}
#marg td, th {
    color: #556B7D;
    border-bottom: 1px solid #E9E0E1;
    border-left: 1px solid #E9E0E1;
    text-align: left;
    padding: .4em .7em 1em;
    vertical-align: middle;
}
th {
    background-color: #900;
    padding-bottom: 15px;
    color: #FFF;
    font-weight: 400;
    font-family: 'Open Sans';
    vertical-align: middle;
}
table {
    border-top: 1px solid #E9E0E1;
    border-right: 1px solid #E9E0E1;
    background-color: #F4F2F3;
    background-color: #F2F3F4;
}
.good {
    font-size: .85em;
    color: #FFF;
    background-color: #C03;
    font-weight: 700;
    width: 70px;
    height: 16px;
    padding-top: 2px;
    margin-top: 5px;
    text-align: center;
    font-family: Arial, 'Open Sans', sans-serif;
}
table.fixed p {
    margin-top: 3px;
}
.wrap {
    width: 695px;
}

Answer 1

取消该单元格上的填充，并将vertical-align: middle和td上的th更改为vertical-align: top

http://jsfiddle.net/s5fhLne6/1/

Answer 2

我只是运行你的代码，因为你使用了内部风格，所以100都是对齐的。在这里试用您的代码http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_internal。

Answer 3

您必须将100添加到div元素并将类设置为.alone，例如：

.alone
{
vertical-align:bottom;
height:70px;
}

.good {
    font-size: .85em;
    color: #FFF;
    background-color: #C03;
    font-weight: 700;
    width: 70px;
    height: 16px;
    padding-top: 2px;
    margin-top: 12px;
    text-align: center;
    font-family: Arial, 'Open Sans', sans-serif;
}

试试这个here!

填充单个单元格而不影响整行？

3 个答案: