Issue
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>
Solution
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>
Answered By - pgoetz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.