CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shekhar Pankaj
Shekhar Pankaj

Reputation: 9125

Issue with table's td element with bootstrap

HTML

<table class="col-xs-12">
<tbody class="col-xs-12">
  <tr class="col-xs-12">
    <td class="col-xs-3">test</td>
    <td class="col-xs-1">tesst</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-3">test</td>
  </tr>
</tbody>
</table>

CSS

table,td
{
  border:1px solid black;

}
td
{
  background-color:red;
}
table
{
  background-color:green;
}
*
{
  padding : 0 !important;
  margin:0 !important;
}

Here is the fiddle

As in fiddle you can see although sum of grid value for td value equals 12 but it ain't covering the entire table , there is left over spaces (green background area) at the end of the table? Why ?How to overcome this issue?

edit

As ShinDarth suggested

You should always wrap the columns (col-*) inside a row:

but I don't agree to him , I have created another fiddle now replacing table element with div, now why this difference?

Update Fiddle

Upvotes: 0

Views: 49

Answers (2)

Igor Ivancha
Igor Ivancha

Reputation: 3451

All you needed, to add class table into table tag instead col-xs-12. In this case other classes col-xs-12 are extra too: 

<table class="table">
  <tbody>
    <tr>
      <td class="col-xs-3">test</td>
      <td class="col-xs-1">tesst</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-3">test</td>
    </tr>
  </tbody>
</table>

JSfiddle-example

Upvotes: 0

Francesco Borzi
Francesco Borzi

Reputation: 61724

You should always wrap the columns (col-*) inside a row:

<table>
<tbody>
  <tr class="row">
    <td class="col-xs-3">test</td>
    <td class="col-xs-1">tesst</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-3">test</td>
  </tr>
</tbody>
</table>

https://jsfiddle.net/o30L1t70/2/

Upvotes: 1

Related Questions