CODEWITHSUNDEEP
htmlcsstwitter-bootstraphtml-table
witoong623
witoong623

Reputation: 1199

How to fix padding Twitter Bootstrap cell tables when using colspan

I'm trying to create study table, using Twitter Bootstrap 3 as css framework. I used <td colspan="2"> for a hour cell and <td> for half hour cell, so it I have 17 cells(8 hours plus 1 cell for day)

<table class="table table-striped">
   <thead>
      <tr>
         <th>#</th>
         <th colspan="2">9.000 - 10.00</th>
         <th colspan="2">10.00 - 11.00</th>
         <th colspan="2">11.00 - 12.00</th>
         <th colspan="2">12.00 - 13.00</th>
         <th colspan="2">13.00 - 14.00</th>
         <th colspan="2">14.00 - 15.00</th>
         <th colspan="2">15.00 - 16.00</th>
         <th colspan="2">16.00 - 17.00</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Mon</td>
         <td></td>
         <td class="study-table-hightlight" colspan="6">ITE-301, S1<br >A603, 86</td>
         <td colspan="3"></td>
         <td class="study-table-hightlight" colspan="6">ITE-204, S1<br >D201, 81</td>
      </tr>
      <tr>
         <td>Tuえ</td>
         <td colspan="4"></td>
         <td class="study-table-hightlight" colspan="6">ITE-302, S1<br >A602, 40</td>
         <td class="study-table-hightlight" colspan="6">HUM-111, S1<br >B202, 81</td>
      </tr>
      <tr>
         <td>Wed</td>
         <td></td>
         <td class="study-table-hightlight" colspan="3">MSC-202, S1<br >A313, 41</td>
         <td colspan="3"></td>
         <td class="study-table-hightlight" colspan="3">JPN-202, S1<br >D503, 30</td>
         <td colspan="6"></td>
      </tr>
   </tbody>
</table>

I expected it to be rendered like this. enter image description here

The first subject should start at center of 9 - 10am column(at 9.30am) but what I got is this.

enter image description here

it start at 10.00 as if td before it was set to colspan="2" but the remainder is work fine.

I tried to disable each css property and found that if I disable width: 100% at .table and set padding: 8px 0px to .table>tbody>tr>td it is rendered properly but quite ugly.
enter image description here
Is there any workaround to get table I want?

Upvotes: 2

Views: 698

Answers (1)

tao
tao

Reputation: 90068

You have to give up td and th padding if you want this to work. It's not a problem of Bootstrap itself, but of the way html tables were designed. Back when they were made, CSS was simply not around yet. All the styling was done inline or via attributes. In our case, with the help of the cellpadding table attribute, which is no longer supported in HTML5 (and which Chrome has dropped support for ~v.20-ish).

So I guess you need 

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 0;
}

for this to work. Now, if you want your padding back, you will need to wrap all the cell contents in divs and apply padding to those (i.e.:.table td>div, .table th>div{padding: 8px;}).
That's the practical solution.

The right solution, however is NOT to use <table>s for layouting. They are designed for tabular data.

Here's a dirty lil' fix, using jQuery and CSS, that dynamically adds div wrappers to all your non-empty tds and ths contents. The text-align:center rule is not needed for it to work, I just added it as I thought it looked nicer.

$('.table th, .table td').each(function() {
  $(this).html($(this).html() ? $('<div>' + $(this).html() + '</div>') : '');
});
table.table>tbody>tr>td,table.table>tbody>tr>th,
table.table>tfoot>tr>td,table.table>tfoot>tr>th,
table.table>thead>tr>td,table.table>thead>tr>th {
  padding: 0;
  border: 1px solid #ddd;
}
.table td > div,.table th>div {
  padding: 8px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th colspan="2">9.000 - 10.00</th>
      <th colspan="2">10.00 - 11.00</th>
      <th colspan="2">11.00 - 12.00</th>
      <th colspan="2">12.00 - 13.00</th>
      <th colspan="2">13.00 - 14.00</th>
      <th colspan="2">14.00 - 15.00</th>
      <th colspan="2">15.00 - 16.00</th>
      <th colspan="2">16.00 - 17.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon</td>
      <td></td>
      <td class="study-table-hightlight" colspan="6">ITE-301, S1
        <br>A603, 86</td>
      <td colspan="3"></td>
      <td class="study-table-hightlight" colspan="6">ITE-204, S1
        <br>D201, 81</td>
    </tr>
    <tr>
      <td>Tue</td>
      <td colspan="4"></td>
      <td class="study-table-hightlight" colspan="6">ITE-302, S1
        <br>A602, 40</td>
      <td class="study-table-hightlight" colspan="6">HUM-111, S1
        <br>B202, 81</td>
    </tr>
    <tr>
      <td>Wed</td>
      <td></td>
      <td class="study-table-hightlight" colspan="3">MSC-202, S1
        <br>A313, 41</td>
      <td colspan="3"></td>
      <td class="study-table-hightlight" colspan="3">JPN-202, S1
        <br>D503, 30</td>
      <td colspan="6"></td>
    </tr>
  </tbody>
</table>

Also as fiddle, you you prefer (I know I do:).

Upvotes: 1

Related Questions