Something like "table-layout: fixed", but only for one table-column
I have a problem that I have a very large value inside one cell:
43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000
What it does is that the entire table becomes larger than it should.
Now I added to the table table-layout:fixed
, the whole table will be changed, not just the column with that value.
I want all the other columns to be the size they need, but only that the last one needs to be rearranged (use multiple rows).
/**
* Returns a table with the values from a query
*/
function tableizeQryRes($arr) {
$isFirst=true;
$tbl = '<table width="100%" border="1" cellpadding="2" frame="box" rules="all" style="table-layout:fixed">';
foreach ($arr as $key => $val) {
//echo $key;
if ($isFirst) {
$tblHeader = '<tr align="center" valign="middle"><td></td>';
$tblBody = '<tr><td>'.$key.'</td>';
foreach ($val as $sub_key => $sub_val) {
if ($sub_key == "Msg") {
$tblHeader .= '<td style="word-wrap:break-word; width:40%">'.$sub_key.'</td>';
$tblBody .= '<td style="word-wrap:break-word; width:40%">'.$sub_val.'</td>';
} else {
$tblHeader .= '<td>'.$sub_key.'</td>';
$tblBody .= '<td>'.$sub_val.'</td>';
}
}
$tblHeader .= '</tr>';
$tblBody .= '</tr>';
$tbl .= $tblHeader;
$tbl .= $tblBody;
$isFirst=false;
} else {
$tbl .= '<tr><td>'.$key.'</td>';
foreach ($val as $sub_key => $sub_val) {
if ($sub_key == "Msg") {
$tbl .= '<td style="word-wrap:break-word; width:40%">'.$sub_val.'</td>';
} else {
$tbl .= '<td>'.$sub_val.'</td>';
}
}
$tbl .= '</tr>';
}
}
$tbl .= '</table>';
echo '<div style="max-width:100%; hyphens:auto">';
echo $tbl;
echo '<br/>';
echo '<br/>';
echo '</div>';
}
If I add sth. for example, style="word-wrap:break-word; width:40%"
and table-layout:fixed
, other cells are also fixed and no longer adjusted.
BTW .: All columns are variable length (and about 150,000 rows). The first 5 columns are small, only 6. contains a message, sometimes with a space, something without it.
source to share
The CSS3 text module allows you to break long words to wrap multiple lines with word-wrap: break-word
. However, in some cases it may happen that this is a large white space on the right before a long word, since a long unbreakable word starts on a new line, although short words may follow a long word.
One way is to use white-space: pre-wrap
and word-break: break-all
, which will prevent long white spaces from forming right in front of a long, unbreakable word.
The downside, however, is that some small words can wrap onto the second line.
You have two options: a method word-wrap
that can leave large spaces in front of a long unbreakable word, or a method whtie-space/word-break
that can leave some small words wrapped around two lines.
I think this is as far as you can go with CSS3. Anything else requires a JavaScript lightweight solution.
table {
border: 1px dotted blue;
table-layout: fixed;
width: 100%;
}
table td {
border: 1px dashed blue;
vertical-align: top;
}
table td.wrapping {
width: 350px;
white-space: pre-wrap;
word-break: break-all
}
<table>
<tr>
<td>a regular table cell with some text</td>
<td class="wrapping">some short words in the text andaverylongword to fill up the line 43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000 and a few words at the end
</td>
</tr>
</table>
source to share
Try to set word-wrap:break-word
to containing element.
Example: jsFiddle
HTML:
<table>
<tr>
<td>Column One</td>
<td>Column Two</td>
<td class="wrap">43003A005C00570069006Eetc...</td>
</tr>
</table>
CSS
table {
table-layout:fixed;
width:100%;
}
.wrap {
width:40%;
word-wrap:break-word;
}
source to share
In firefox, you must use "max-width" instead of "width", otherwise it will simply be ignored in the table with "layout-table: auto".
So, if you don't want to use "layout-table: auto", you can simply assign a class like this to the column you want to constrain the size
.wrap {
word-wrap: break-word;
max-width: 100px;
}
source to share