A B
A B
A X
A B
In a contained block with a fixed width of 400px, there is a table. When the browser width drops below 421px, the width of the containing block changes to 95%. The cells labeled "A" and "B" contain simple text. There is one cell containing a link that has white-space:nowrap applied.
The goal is for the table to determine its dimensions automatically (without using table-layout:fixed-width) but not include cell "X" in determining the width of the second column. It's acceptable to hide any content in cell "X" that doesn't fit.
Various attempts have been made to apply width:100% with overflow:hidden on different elements without success.
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-de{
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;
}
}
}
}