CODEWITHSUNDEEP
htmlcsshtml-table
Sawyer
Sawyer

Reputation: 15917

CSS styling table tds

There are lots of pages I need to work with , the good thing is they all have the same structure. And finally I want to achieve a visual effect like this. 

<tr><td style="width:15%;">label text</td>
    <td style="width:35%;"><input type='text' style="width:50%"; /></td>
    <td style="width:15%;">label text</td>
    <td style="width:35%;"><input type='text' style="width:50%"; /></td>
</tr>

How can I applying CSS to a plain table and renders the same visual result like this ?

Upvotes: 0

Views: 1725

Answers (1)

cletus
cletus

Reputation: 625007

You can't without either using CSS3 or helping the CSS out by applying some classes:

<tr>
  <td class="label"><label for="input1">label text</label></td>
  <td class="field"><input type="text" id="input1"></td>
  <td class="label"><label for="input2">label text</label></td>
  <td class="field"><input type="text" id="input2"></td>
</tr>

with:

td.label { width: 15%; }
td.field { width: 35%; }
td.field input { width: 35%; }

Either that or using Javascript.

Upvotes: 2

Related Questions