Tim
Reputation: 177
Why TD is not expanding as expected?
We have a strange situation where in html table which is 100% and scrollable TBODY which is 100% width also, it is not expanding the way we want ONLY in situation when we have small amount of rows( so we dont need scrolling ).
Note: it is very important to me to work with %.
I have the same classes applied to all TDs and i expect to see all of them with same width.
The result is the following. http://jsfiddle.net/FqDfy/
<div id="pnlData">
<table class="sortable filterable TF" id="htmlTabela" style="display: block;">
<thead class="fixedContent">
<tr class="fltrow">
<td class="date-width">
<input type="text" id="flt0_htmlTabela" ct="0" class="flt">
</td>
<td class="time-width">
<input type="text" id="flt1_htmlTabela" ct="1" class="flt">
</td>
<td class="alarm-width">
<input type="text" id="flt2_htmlTabela" ct="2" class="flt">
</td>
<td class="priority-width">
<input type="text" id="flt3_htmlTabela" ct="3" class="flt">
</td>
<td class="stName-width">
<input type="text" id="flt4_htmlTabela" ct="4" class="flt">
</td>
<td class="ptName-width">
<input type="text" id="flt5_htmlTabela" ct="5" class="flt">
</td>
<td class="desc-width">
<input type="text" id="flt6_htmlTabela" ct="6" class="flt">
</td>
<td class="zone-width">
<input type="text" id="flt7_htmlTabela" ct="7" class="flt">
</td>
</tr>
<tr>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable date-width" id="header-date" table-sortable="ignorecase">Date</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable time-width" id="cell-time" table-sortable="ignorecase">Time</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable alarm-width" id="cell-alarm" table-sortable="ignorecase">Alarm</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable priority-width" id="cell-priority" table-sortable="ignorecase">Priority</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class=" stName-width header-clickable" id="cell-stationName" table-sortable="ignorecase">StationName</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable ptName-width" id="cell-pointName" table-sortable="ignorecase">PointName</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable desc-width" id="cell-description" table-sortable="ignorecase">Description</th>
<th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable zone-width" id="cell-zname" table-sortable="ignorecase">Zone Name</th>
</tr>
<tr>
<th class="fltHolder" id="fltHolder0"> </th>
<th class="fltHolder" id="fltHolder1"> </th>
<th class="fltHolder" id="fltHolder2"> </th>
<th class="fltHolder" id="fltHolder3"> </th>
<th class="fltHolder" id="fltHolder4"> </th>
<th class="fltHolder" id="fltHolder5"> </th>
<th class="fltHolder" id="fltHolder6"> </th>
</tr>
</thead>
<tbody class="scrollContent" style="height: 150.5px;">
<tr style="color:Gold;">
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="date-width">13 Sep 2013</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="time-width">15:05:15.947000</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="alarm-width">*</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="priority-width">3</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="stName-width">SYS$</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="ptName-width">SCADA</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="desc-width">OmsLinesections file 80 percent full</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="zone-width" id="cell-zname">AllZones</td>
</tr>
<tr style="color:Gold;">
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="date-width">12 Sep 2013</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="time-width">17:12:15.080000</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="alarm-width">*</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="priority-width">3</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="stName-width">SYS$</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="ptName-width">SCADA</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="desc-width">OmsLinesections file 80 percent full</td>
<td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="zone-width" id="cell-zname">AllZones</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
Upvotes: 1
Views: 4147
Answers (4)
Sebastian H
Reputation: 119
The browsers add the tbody tag if it is not in Your code. - This worked for me to make the tds extend fully within the table:
tbody { display:table;width:100% }
Upvotes: 0
Dragan Ristovski
Reputation: 68
You should put tbody.scrollContent >tr
{
width:100%;
display:table;
}
in your css
Upvotes: 0
John
Reputation: 13729
There are so many useless CSS classes and inline styling you should just start with a basic test case and work towards your goal.
Here is your table cleaned up for the most part. BTW the orange is difficult to read without a darker background-color.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Table</title>
<style type="text/css">
/*<![CDATA[*/
.width_100 {width: 100%;}
table tfoot, table thead {background-color: #9E3232;}
table {border-collapse: collapse;}
table tbody td {background-color: #bbb; color: #ffd700;}
/*]]>*/
</style>
</head>
<body>
<table class="width_100">
<thead>
<tr><th>Date</th><th>Time</th><th>Alarm</th><th>Priority</th><th>StationName</th><th>PointName</th><th>Description</th><th>Zone Name</th></tr>
</thead>
<tbody>
<tr><td>13 Sep 2013</td><td>15:05:15.947000</td><td>*</td><td>3</td><td>SCADA</td><td>OmsLinesections file 80 percent full</td><td>AllZones</td></tr>
<tr><td>12 Sep 2013</td><td>17:12:15.080000</td><td>*</td><td>3</td><td>SYS$</td><td>SCADA</td><td>OmsLinesections file 80 percent full</td><td>AllZones</td></tr>
</tbody>
<tfoot><tr><th>Date</th><th>Time</th><th>Alarm</th><th>Priority</th><th>StationName</th><th>PointName</th><th>Description</th><th>Zone Name</th></tr></tfoot>
</table>
</body>
</html>
Upvotes: 0
Sasidharan
Reputation: 3740
If you are ok with the below result then just remove all display:block..
Upvotes: 1
Related Questions
- Table row not expanding to full width
- Why does the first column expand in this table?
- Expanding td width beyond the size of the container
- Expanding Tables
- Table TD width not working
- Can't get table cells to expand evenly
- CSS table-row not expanding 100% inside table-cell
- Expanding of td tag when added a row
- Table column expand when expanding input, why?
- div inside td,but td is unexpectedly expanded