CODEWITHSUNDEEP
cssresponsive-designcss-tables
Rohan Patil
Rohan Patil

Reputation: 1963

Responsive table alignment of columns

In responsive table design to refer I got this link jsfiddle.net/n4rUG/27/

This gives me below output:

enter image description here

Now I want to align title to left and its value to right means it need to look aligned properly

How to do this?

Upvotes: 1

Views: 1773

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

The text-align: right doesn't work for your tds because it's overridden by the Bootstrap style with higher specifity. The quickest solution is just to add !important. Also, I'd suggest to make the labels floating to left (see modified fiddle):

    td {
        ...
        text-align: right !important;
        overflow: hidden; /* for containg floats */
    }
    td:before {
        ...
        float:left;
    }

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Your JSFiddle is different then the image in your post.

Refering to your image, you could make it like this, using colspan to set your colums width:

<table>
   <colgroup>
      <col width="100px" />
      <col width="200px" />
   </colgroup>
   <tr>
      <td>title</td>
      <td>value</td>
   </tr>
   <tr>
      <td>title</td>
      <td>value</td>
   </tr>
...
</table>

As for your JSFiddle, you have 5 <th>'s and 6 <td>'s. Which is possible, however, one of the <th> should cover two <td>'s, you can make that by using this:

<th colspan="2">Title</th>

Upvotes: 0

Related Questions