How to change each column's width individually? - html

Question

In JavaScript, one style width value is set for all columns, and I can't resize them one by one. I need to resize columns one by one, not all at once:
<table class="table table-striped table-bordered dataTable" id="detailed">
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
<th>C6</th>
</tr>
</thead>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tfoot>
<tbody>
{% for col in cols %}
<tr>
<td>{{ col.name1 }}</td>
<td>{{ col.name2 }}</td>
<td>{{ col.name3 }}</td>
<td>{{ col.name4 }}</td>
<td>{{ col.name5 }}</td>
<td>{{ col.name6 }}</td>
</tr>
{% endfor %}
</tbody>
</table>

Answer 1

Use nth-child to change individual column's width. JSFiddle
tr>td:nth-child(1){
width:100px;
}
tr>td:nth-child(4){
width:450px;
}

Answer 2

You will have to assign an id (or class if you want to change some cells but not all.) to the tags. Then of course use normal CSS to change width, height or padding, etc.
PS. On my phone right now, hard to provide any sample code. Feel free to suggest edit.

Answer 3

Add to table
width: 100%
Next you can add something like this to each TH :
<th style="width: 10%; padding: 5px;">C1</th>
Or (best option i think) add to th class and set there a css
<th class="nameClass">C2</th>
Style CSS:
.nameClass {
width: 10%; // could be other value in px, inc etc.
padding: 5px;
}
Better options to make this is from user below :P