Menu
I am working on the HTML and CSS and I get this result which is not perfect:
I've created a fiddle with it here: http://jsfiddle.net/niklasro/GParb/
But the borders of the table seem to not match the borders of the desired screen shot. How can I make the layout look more like the original mockup and remove the double borders on the table?
Here is the CSS and HTML code I have for the table:
CSS
table{ width:100%; text:align:center;border:1px solid #00F; font-size:12px;}
th{background:#EEE;width:auto; text-align:center; padding:5px 0;border:1px solid #00F;}
td{width:auto; text-align:center; padding:5px 0;border:1px solid #00F;}
tr:nth-child(even) {background: #EEE;}
HTML
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href="/admin/account/0b2bdf4f-c293-418b-a082-ef986eb94148">pelle</a></td>
<td> <a href="/admin/account/0b2bdf4f-c293-418b-a082-ef986eb94148">pelle@example</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/0b2bdf4f-c293-418b-a082-ef986eb94148"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/21153522-6544-4368-875a-753f4154ff9d">niklas</a></td>
<td> <a href="/admin/account/21153522-6544-4368-875a-753f4154ff9d">niklas</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/21153522-6544-4368-875a-753f4154ff9d"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/27053a2e-3742-4046-b876-87940c35b5bc">martin</a></td>
<td> <a href="/admin/account/27053a2e-3742-4046-b876-87940c35b5bc">martin</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/27053a2e-3742-4046-b876-87940c35b5bc"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/5e1947de-1185-44bb-a9f5-170df342124b">henrik</a></td>
<td> <a href="/admin/account/5e1947de-1185-44bb-a9f5-170df342124b">henrik</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/5e1947de-1185-44bb-a9f5-170df342124b"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f">[email protected]</a></td>
<td> <a href="/admin/account/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f">[email protected]</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/61a11f6e-e3bf-4d07-b05a-f7c3ecf0377f"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/83f96511-550e-4df0-bb77-e569fc0be2bc">marc</a></td>
<td> <a href="/admin/account/83f96511-550e-4df0-bb77-e569fc0be2bc">marc</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/83f96511-550e-4df0-bb77-e569fc0be2bc"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/95072cd9-749c-42e8-8c11-553def704f62">lukas</a></td>
<td> <a href="/admin/account/95072cd9-749c-42e8-8c11-553def704f62">lukas</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/95072cd9-749c-42e8-8c11-553def704f62"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/aa2d4b43-1f11-448b-bff1-0d4152c40735">rms</a></td>
<td> <a href="/admin/account/aa2d4b43-1f11-448b-bff1-0d4152c40735">rms</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/aa2d4b43-1f11-448b-bff1-0d4152c40735"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/c043d631-10e6-4b58-9a0f-6563199d42f7">kalle</a></td>
<td> <a href="/admin/account/c043d631-10e6-4b58-9a0f-6563199d42f7">kalle@example</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/c043d631-10e6-4b58-9a0f-6563199d42f7"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
<tr>
<td> <a href="/admin/account/f6e53781-4574-4d96-b900-204eaad6e662">blahonga</a></td>
<td> <a href="/admin/account/f6e53781-4574-4d96-b900-204eaad6e662">097097</a> </td>
<td></td>
<td></td>
<td><a href="/admin/editaccount/f6e53781-4574-4d96-b900-204eaad6e662"><img src="/images/edit.gif"></a><img src="/images/save.gif"><img src="/images/unlocked.gif"><img src="/images/locked.gif"> </td>
</tr>
</tbody>
</table>
953
Add the border-collapse:collapse; to the table css selector. This will eliminate that nested border look. Also, your Text:align:center; should really be text-align:center;
Fiddle: http://jsfiddle.net/GParb/1/
CSS
table{
width:100%;
border-collapse:collapse;
text-align:center;
border:1px solid #00F;
font-size:12px;
}
Unlike the cellspacing="0" as suggested below, this answer will collapse the borders to not be a 3D effect, just like what the OP asked for.
Comparison fiddle: http://jsfiddle.net/GParb/7/
170
1 . To remove the double-border look of a table
Just edit your table tag as following:
<table cellspacing="0" border="1"> ...</table>
To give color to the borders add : bordercolor="#00F"
But cellpadding, cellspacing,border etc of a table are Deprecated Attributes.Instead you can use the CSS styles equivalent to the above from the following table:
2 . To remove the double-border look of a table and to obtain the exact output as the image shown in the question
Best solution : Use border-collapse:collapse; for the <table> element.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
