Question

我有两张桌子。我怎样才能单独设计它们？我需要在表1中没有边框的图像居中，在表2中我需要保持文本与边框保持对齐。

的CSS：

table, th, td {
    border: 1px solid #999;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}

HTML：

//table 2
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

//table 1
<table border="0" style="width:100%">
  <tr>
    <td><img src="img1.png"></td>
    <td><img src="img2.png"></td>
  </tr>
</table>

Answer 1

将一个类应用于每个表，并使用唯一类

来定位表

HTML：

//table 2
<table class="first-table" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

//table 1
<table class="second-table" border="0" style="width:100%">
  <tr>
    <td><img src="img1.png"></td>
    <td><img src="img2.png"></td>
  </tr>
</table>

CSS：

.first-table {
  // first table styles here
}

.second-table {
  // second table styles here
}

希望这有帮助。

Answer 2

demo

在table1上添加class

  table, th, td {
        border: 1px solid #999;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
    }

    .table1 td{
        text-align: center;
    }

.table1,.table1 td,.table1 tr{
    border: 0px;
}

单独设置两个表的样式

2 个答案: