CSS Table Format Issue

OK so I used an online generator to create a table class.  But I need to tweak it. I needed the table to not use 100%. So I set the width to 10px knowing it would scale it up. It all looks fine, but the outer blue border is still 100%. I've been googling, but cant seem to see what property in the class controls that.  I would think it would have to be at the table level, but I'm just missing something.

Attached is a screenshot of the issue, and below is the class.

.error {color: #FF0000;}
.datagrid table { border-collapse: collapse; text-align: left;  width: 10px; }
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td,
.datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #00496B; border-left: 1px solid #C3CFD4;font-size: 12px;font-weight: normal; }
.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

Open in new window

Untitled.png
bhiebAsked:
Who is Participating?
 
GaryCommented:
Add

display:inline-block;

to

.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
0
 
LZ1Commented:
We need to see either a live URL or some rendered code with the CSS.
0
 
GaryCommented:
There must be another element around the table - maybe a div
So what element has a class of datagrid?
Try adding
display:inline-block;
to
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
bhiebAuthor Commented:
Sure here is the HTML.
<div class="datagrid">
<table>
<thead><tr>
<th>Unit</th>
<th>Reported Date</th>
<th>Reported By</th>
<th>Age</th>
</tr></thead>

<tbody><tr class="alt"><td>1105</td><td>10/10/2013</td><td>WebUser</td><td>0</td>

</tr><tbody><tr><td>1210</td><td>10/10/2013</td><td>WebUser</td><td>0</td></tr>

</tbody></table></div>

Open in new window


The test page is at http://www.alanritchey.com/mobilecommissue/test.php
0
 
LZ1Commented:
Your div with a class of .datagrid is giving the border.
0
 
bhiebAuthor Commented:
Perfect Gary, that was it. LZ1, you were on the right track too, but his was first.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.