CODEWITHSUNDEEP
htmlcsshtml-table
SnAzBaZ
SnAzBaZ

Reputation: 6589

Intelligent HTML Table Column Widths

This is what my table currently looks like:

enter image description here

I want to reduce the gap between the two buttons and move the buttons more towards the text content. However I still want the table to adjust if I enter in some really long text, or look at it on a big / small screen.

jsFiddle link

This is my current HTML:

<table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<thead>
    <tr>
        <th scope="col">Manufacturer</th>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="fullWidth">Arrow International</td>
        <td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
        <td class="fixedWidth"><input type="button" value="Delete"  class="button" /></td>
    </tr>
    <tr>
        <td class="fullWidth">Cardinal Health</td>
        <td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
        <td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
    </tr>
    <tr>
        <td class="fullWidth">DeRoyal</td>
        <td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
        <td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
    </tr>
    <tr>
        <td class="fullWidth">Kimberly-Clark</td>
        <td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
        <td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
    </tr>
</tbody>

This is my current CSS:

#main-content table {
            width: 100%;
            border-collapse: collapse;
            }
            
#main-content table thead th {
            font-weight: bold;
            font-size: 15px;
            border-bottom: 1px solid #ddd;
            }
            
#main-content tbody {
            border-bottom: 1px solid #ddd;
            }
            
#main-content tbody tr {
            background: #fff;
            }
          
#main-content tbody tr.alt-row {
            background: #f3f3f3;
            }
            
#main-content table td,
#main-content table th {
            padding: 10px;
            line-height: 1.3em;
            }        
            
#main-content table tfoot td .bulk-actions {
            padding: 15px 0 5px 0;
            } 
            
#main-content table tfoot td .bulk-actions select {
            padding: 4px;
            border: 1px solid #ccc;
            }
            
#main-content td .fixedWidth {
            white-space: nowrap;
            width: 0%;
            }
            
#main-content td .fullWidth {
            width: 100%;
            white-space: normal;
            }

I have been experimenting with the white-space: nowrap but have not found the solution yet!

Am I close?

Upvotes: 0

Views: 2445

Answers (3)

Mike Hofer
Mike Hofer

Reputation: 17022

I am sure someone has a CSS solution that works across all browsers somewhere, but I've found that the fastest way to solve this problem (that is, not keep wasting money on it), is to use a <colgroup/> element with its '' elements below it:

<table>
    <colgroup>
        <col id='foo'/>
        <col id='bar'/>
        <col id='baz'/>
    </colgroup>
...
</table>

Then style the width of the col element in your stylesheet.

Upvotes: 0

ogur
ogur

Reputation: 4586

Maybe something like this? http://jsfiddle.net/tEyQH/

#main-content table thead th:last-child {
    width: 100%;
}

Upvotes: 2

Michal
Michal

Reputation: 3368

Your table always adjusts to 100%, change that in CSS:

#main-content table {
        /*width: 100%;*/
        border-collapse: collapse;
        }

This will have the table being adjusted to content widths.

Upvotes: 2

Related Questions