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 disable IE11 WebBrowser control scaling

    How to display Highcharts in rows (5)

    How to add pictures around a background through CSS?

    How to vertically align the baseline of text to a set point in HTML/CSS

    Change Color Themes - How To Prevent the Site Goes Back to Default

    How to make a pure css triangle which has a white center

    How to stick a background behind the navbar?

    how to add a CSS class inside a JavaScript setup code?

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    How to give different views for same url for different devices with same resolution?

    How to automaticly let HTML cut the edges based on the setted height of the image?

    Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

    How to place HTML elements over inline SVG

    How to determine the display order of
  • in a list with 4 columns?
  • How to CSS style a radius border

    How to style a PHP generated label?

    How to indent list items using CSS when you have floating blocks?

    How to auto adjust wrapper height when padding is applied to inner elements

    Big Cartel - Slideshow Questions

    How do I get a CSS Selector to Skip Over?

    how to trigger a stored property with css color change?

    How to set a box on bottom of a box?

    css - can't get dropdown nav to show above content below it

    how to add background images using css in phonegap

    How to view embedded image in a CSS file

    How to use active and before with CSS?

    How to force space inbetween a css table (responsive webpage)

    How do you close the CSS preview view in Eclipse?

    How to make a search bar clippable without pushing down elements, using 2 inputs

    How to prevent adding CSS 'class' properties