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 to add multiple css rules to minimize browser reflows?

    HTTPS and how to reference files and images

    How to handle this CSS issue with Wordpress?

    How to Highlight the Menu in css. I used a:active but it does not serve the purpose I expected

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How to underline blank space in CSS?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    How to include multiple Css Class in ActionLink?

    How to make div scalable by using percentage in CSS

    HTML/CSS - how to position an image in the above the right and left corner of a panel

    CSS: show triangles in a row

    How to make specific areas in a div clickable with css / js / anything

    How to use a responsive background image that centers differently in both portrait & landscape?

    CSS - How to make overflow hidden on the right but not the left? [duplicate]

    How to make CSS triangles (with borders) compatible across browsers

    css how to get rounded corners on button.

    How to format a title attribute with css (setting more width)?

    How to understand CSS Background-Position coordinates

    How to pass parameter in CSS and then how to apply if..else on that parameter in ASP.NET?

    How to put a table inside an inline-block element where cells have a percentage width

    How do I vertically center an image whose size can change in a div?

    How can I get a relative div to expand to fit its absolute contents?

    How to read from CSS files with jQuery

    how to use querySelector to select dynamic added elements

    How can i change or remove title and page address?

    How to find out and get rid of unused CSS code? [closed]

    how do you change the color of nav bar

    How can I override an inline CSS rule using an external file?

    How Can I get my DL to style properly?

    How to represent x and y in svg symbol