How to move columns to the left in table? - html

Question

I want to move columns to the left and also there should be set a fixed size in between.
Now it looks like this:
Hopefully I could get this result:
CSS Code:
.table {
width:100%;
}
.table table{
border-collapse: collapse;
width:100%;
}
.table td{
padding-left: 5px;
color: #000000;
font-size: 12px;
line-height: 16px;
margin-bottom: 6px;
font-family: Arial,Helvetica,sans-serif;
}
.table tr:nth-child(odd){ background-color:#EFEFEF; }
.table tr:nth-child(even) { background-color:#ffffff; }
.table tr:first-child td{
padding-left: 5px;
background-color:#EFEFEF;
text-align:left;
color:#868686;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
line-height: 16px;
margin-bottom: 6px;
}
/* Border line in the middle (first-child) Example: 1 | 2 | 3 */
.table tr:first-child td:not(:last-child) { border-right: 1px solid #868686;}
HTML:
<div class="table" >
<table>
<tr>
<td>
ID#
</td>
<td>
Name
</td>
<td>
Edit
</td>
<td>
Delete
</td>
</tr>
<tr><td><?php echo $tags_id ?></td><td><?php echo $name ?></td> <td><?php echo "<a href='edit.php?id=$tags_id'>Edit</a>"; ?></td> <td><?php echo "<a href='delete.php?id=$tags_id'>Delete</a>"; ?></td></tr>
</table>
</div>

Answer 1

You didn't tell us what version of HTML you are using, but the following should work in any version. Add a <colgroup> as the first child of your table element like this:
<table>
<colgroup>
<col width="20em"/>
<col width="10em"/>
<col width="10em"/>
</colgroup>
</table>
This will fix the widths of the columns to a certain number of characters. If this doesn't work out the way you want it to, try setting a width attribute on the <table> and use percentages in your <col/> widths:
<table width="40%">
<colgroup>
<col width="50%"/>
<col width="25%"/>
<col width="25%"/>
</colgroup>
</table>

Answer 2

You've setup the width:100% to your table that means all the column will try to span across all the available width. So you can remove that from your table
Js Fiddle Demo

Answer 3

Try like this: Demo
.table {
width:100%;
}
.table table {
border-collapse: collapse;
width:100%;
}
.table tr {
clear:both;
}
.table tbody td, .table th {
display:inline;
width:auto;
text-align:left;
padding: 1px 10px;
color: #000000;
font-size: 12px;
line-height: 16px;
margin-bottom: 6px;
font-family: Arial, Helvetica, sans-serif;
}
.table tbody tr:nth-child(odd) {
background-color:#ffffff;
}
.table tbody tr:nth-child(even) {
background-color:#EFEFEF;
}
.table thead tr {
background-color:#EFEFEF;
}
.table thead tr th {
color:#868686;
border-right: 1px solid #868686;
}
HTML:
<div class="table">
<table>
<thead>
<tr>
<th>ID#</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
Hope this helps you!

Answer 4

.table {
width:50%;
}
This should solve the issue. Here is a fiddle.
http://jsfiddle.net/xzzcrouf/3/. You can also try this for better styling -
http://jsfiddle.net/xzzcrouf/4/

Answer 5

I removed width:100% from my table in CSS.
HTML:
<div class="table" >
<table>
<colgroup>
<col style="width:50px">
<col style="width:250px">
<col style="width:180px">
<col style="width:1500px">
</colgroup>
<tr>
<td>ID#</td>
<td>Name</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>1</td>
<td>NAME</td>
<td>EDIT</td>
<td>DELETE</td>
</tr>
</table>
</div>
Js Fiddle Demo
Maybe there is a better way but it's displayed as I wanted.
Thanks #pgoetz for sharing the information about colgroup.