两个具有不同属性的表

Question

我有两个HTML表格。它们都在CSS中具有相同的属性（相同的id）。相同的宽度，相同的字体等等.. 但即使身份相同，头条也会转移到不同的位置。 这就是问题所在：

firstHead       secondHead       thirdHead
---------       ----------       ---------
data            data             data


firstHead     secondHead     thirdHead
---------     ----------     ---------
data          data           data

我需要的是，其中一个完全在另一个之下，以及我将添加的下一个表格;都在同一条线上。

＆＃13;

＆＃13;

    #ActTable {
      margin-left: 24px;
      width: 95%;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
      font-size: 12px;
      border-collapse: collapse;
      text-align: left;
    }
    #ActTable th {
      font-size: 14px;
      font-weight: normal;
      padding: 10px 8px;
      border-bottom: 2px solid black;
    }
    #ActTable thead tr th {
      width: 59%;
    }
    #ActTable td {
      word-break: keep-all;
      border-bottom: 1px dotted black;
      padding: 6px 8px;
    }

＆＃13;

<table id="ActTable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<table id="ActTable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用bootstrap，

<div class="row">
  <div class="col-md-4">
    //Your first column
  </div>

<div class="col-md-4">
   //Your 2nd column  
</div>

<div class="col-md-4">
  //Your 3rd column
</div>

然后下一行也一样。

Answer 2

将您的ID更改为类，它应该像这样工作

＆＃13;

＆＃13;

.ActTable {
 margin-left:24px;
 width:95%;
 font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 font-size: 12px;
 border-collapse: collapse;
 text-align: left;
}
.ActTable th
{
 font-size: 14px;
 font-weight: normal;
 padding: 10px 8px;
 border-bottom: 2px solid black;    
}

.ActTable thead tr th {
 width: 59%;
}

.ActTable td
{
word-break: keep-all;
border-bottom: 1px dotted black;
padding: 6px 8px;
}

＆＃13;

<table class="ActTable">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<table class="ActTable">
  <thead>
    <tr>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  <tbody>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;