Question

result

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;
}
Was it helpful?

Solution

All your dates are in a

<th>

tag instead of a

<td>

tag

<th>

is by default bold.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top