Two tables with different attributes

Question

I have two tables in HTML. Both of them have the same attributes in CSS (same id). Same width, same font and so on.. But even with the same id, the headlines move to different location. This is the issue:

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


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

What I need, is for one of them be exactly under the other, and also the next tables I will add; all in the same line.

    #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;
    }

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

Don't use the same ids first of all.. they are supposed to be unique.. use classes instead — Michail Michailidis, Feb 06 '16 at 13:44
I need it to be in the same format. So the next table i will just add some data and get the same table as one above him. — BenjaminKlip, Feb 06 '16 at 13:47
Id must be unique and show us your efforts how can we solve problem without seeing the code.? — Ajay Makwana, Feb 06 '16 at 13:49
*Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the **shortest code necessary to reproduce it in the question itself**. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve].* Please note that questions that don't do this **[can be closed](https://stackoverflow.com/help/closed-questions)**, which means they're blocked from getting answers. — BSMP, Feb 06 '16 at 13:53
Possible duplicate of [Table Column width must be same for two tables](http://stackoverflow.com/questions/12190266/table-column-width-must-be-same-for-two-tables) — Michail Michailidis, Feb 06 '16 at 13:53
This is possibly what you need: http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table/3076790#3076790 — Michail Michailidis, Feb 06 '16 at 13:57
Can you show some sample data in your `` and `` elements that distorts the dimensions of your column/cell-widths? Because it appears, currently (*without content*) that everything lines up already (which is clearly *not* what you're seeing). — David Thomas, Feb 06 '16 at 14:13

score 0 · Answer 1 · answered Feb 06 '16 at 13:56

0

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

And then the same for the next row.

answered Feb 06 '16 at 13:56

Guest012393

255
1
4
15

score 0 · Accepted Answer · answered Feb 06 '16 at 14:02

Change your id to class and it should work like this does

.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;
}

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

Worked like a charm. Thanks. why it worked with a class but not with the id tag? — BenjaminKlip, Feb 06 '16 at 15:33
@BenjaminKlip Because classes can be used by many elements, id's for one. — Asons, Feb 06 '16 at 18:27

Two tables with different attributes

2 Answers2