Bootstrap: user agent css styles misbehaving how to solve this


Tags: html5,css3,twitter-bootstrap-3,stylesheet,user-agent

Problem :

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


Solution :

All your dates are in a

<th>

tag instead of a

<td>

tag

<th>

is by default bold.


    CSS Howto..

    How can I create custom tooltips with css pseudoelements

    CSS stylesheets at top or bottom? or How to solve blank page issue?

    How to change css style for only one image in specific page in wordpress?

    How to build this layout with CSS?

    How to prevent outer
    CSS from affecting inner
    CSS

    How to prevent Ajax overflow/server crash? (Arduino/ESP8266 Environment)

    How can I use jquery to hide a drop down menu when the user clicks outside of the menu area?

    how to apply css property to my first div class only

    CSS slide page up animation- element briefly shows before the animation

    How to Center a image with HTML CSS

    How to make a website to occupy the entire element?

    How to position an inner - inner tag at different position?

    How to add css to linked rails imge

    How do i make this form same on all browsers?

    How to animate selection / deselection in ace editor?

    How to scale down CSS background-image when using various background-positions?

    How to use very large font sizes in Internet Explorer with CSS that won't affect design?

    How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

    How to remove critical CSS from the main.css file

    How can I inject a static CSS File in GWT like it is done with JS Files?

    How to use objects returned by a function?

    How to display heading and paragraph elements inline in css?

    How to avoid setting CSS class to one table among two tables?

    how to put 2 triangle in together css

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How i can get the td data getting from css to attach to my current row ,and use for my logic

    How to create a button with overlapping Ribbon Shape in CSS?

    CSS Menu - how to [closed]

    How do you style/select inline-block elements in the first row when in a flexible container?

    Show/Hide Div's via | Save Scrollbar | Save State