I'm using bootstrap 3 tables but as you can see the last column (Date) has a different css style (bold) I didn't ask for, while trying to figure it out i found out it was the user agent who did this! i heard about overring it, but when i do that it also affect the table header, plus i don't understand why it(the user agent) choose just one column to mess up while they are sharing exatly the same styles.
Here is the code
<table class="table table-condensed table-striped" >
<thead>
<tr>
<th class="lay1">#</th>
<th class="lay2">Destinataire</th>
<th class="lay10">Message</th>
<th class="lay2">Etat</th>
<th class="lay2">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>+22670784513</td>
<td>You should notice I downloaded a local copy of jQuery to store in the same /js folder...</td>
<td> <span class="label label-success" >Transmis!</span> </td>
<th>08/05/2013 20:45</th>
</tr>
<tr>
<td>2</td>
<td>+22678783030</td>
<td>You should notice I downloaded a local copy of jQuery to store in the same /js folder...</td>
<td> <span class="label label-success">Transmis!</span> </td>
<th>08/05/2013 20:45</th>
</tr>
<tr>
<td>3</td>
<td>+22676787813</td>
<td> You should notice I downloaded a local copy of jQuery to store in the same /js folder So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).</td>
<td> <span class="label label-warning">En Attente...</span> </td>
<th>09/05/2013 20:46</th>
</tr>
<tr>
<td>3</td>
<td>+22676787813</td>
<td>You should notice I downloaded a local copy of jQuery to store in the same /js folder...</td>
<td> <span class="label label-danger">Echec.</span> </td>
<th>09/05/2013 20:46</th>
</tr>
</tbody>
</table>
And Css Style I added except boostrap's css
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lay10{ width: 100%; }
.lay9{ width: 90%; }
.lay8{ width: 80%; }
.lay7{ width: 70%; }
.lay6{ width: 60%; }
.lay5{ width: 50%; }
.lay4{ width: 40%; }
.lay3{ width: 30%; }
.lay2{ width: 20%; }
.lay1{ width: 10%; }
.table {
table-layout:fixed;
}
All your dates are in a
<th>
tag instead of a
<td>
tag
<th>
is by default bold.