css - Stop a single table cell from determining table width -
a b b x b i've got table inside containing block has set width of 400px. when browser width less 421px containing block width switches 95%. cells of type "a" , "b" contain simple text. there single cell contains link white-space:nowrap applied.
i need table self determine dimensions (so no table-layout:fixed-width), not take in account cell "x" when determining width of second column. ok hide content of cell "x" doesn't fit.
i have tried applying width:100% overflow hidden on manner of different elements, no avail.
html
<table> <tr> <th style="vertical-align:bottom;"> <figure> <div class="minical-mo">month</div> <div class="minical-da">date</div> </figure> </th> <td style="vertical-align:bottom;"><h2>summary</h2></td> </tr> <tr> <th class="space">calendar</th> <td class="space"></td> </tr> <tr> <th class="space">date</th> <td class="space">date</td> </tr> <tr> <th>start time</th> <td>time</td> </tr> <tr> <th>end time</th> <td>time</td> </tr> <tr> <th>location</th> <td>location</td> </tr> <tr> <th class="space">attachment</th> <td class="space link"><a href="link">link</a></td> </tr> <tr> <th class="space">description</th> <td class="space">long desc</td> </tr> </table> scss
table{ width:100%; margin:1em 0; th{ color:$c_modal; text-align:right; font-size:.85em; padding: 3px; vertical-align:top; &.space{ padding-top:1em; } figure{ float:right; margin:0; .minical-mo{ width:60px; height:15px; font-size:11px; line-height:15px; text-align:center; color:white; background-color:$c_main; } .minical-da{ width:60px; height:45px; font-size:35px; line-height:45px; text-align:center; color:black; background-color:white; border-radius:0 0 5px 5px; -webkit-box-shadow: 0 5px 12px -5px $c_dk; -moz-box-shadow: 0 5px 12px -5px $c_dk; box-shadow: 0 5px 12px -5px $c_dk; } } } td{ color:black; font-size:.85em; padding:3px; vertical-align:top; &.space{ padding-top:1em; } p{ margin-bottom:1em; line-height:1.2; } &.link{ overflow:hidden; a{ width:100%; overflow:hidden; } } } }
make sure following applied .link element.
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; /* adjust needed */ this cut off link if it's long, filling in ... @ end.
Comments
Post a Comment