Hello everyone,
I'm trying to present a table that will be viewable in browsers with
different screen widths (e.g. desktop, mobile, etc.).
My approach is to create a table with fixed-width outside columns and a
variable-width internal column (I've classed this variable-width column
as column_main).
The code below works fine, however, I'd like the rows to remain the same
height (with any excess text to overflow), and this is where I am
running in to problems: as the browser window shrinks, the rows get
thicker. I'd like all rows to stay the same height with excess text to
overflow (preferably with an ellipsis cue).
If someone could suggest a solution I would be most grateful. Note that
I have tried to limit the height of the rows using the code labelled
/**/ below but my browser (Firefox 3.6) will not honour it.
Many thanks and regards,
Grant Bailey
***
HTML:
src="../../Images/M4/gavel.png" />
Topic 1: Introduction to tortsclass="topic_description">This topic provides an introduction to the law
of torts.
href="/webct/RelativeResourceManager/Template/Module_5/PDFs_M5/5.1.pdf">class="pdf_icon" alt="PDF icon" src="../../Images/Common/pdf_icon.png"
/>
href="/webct/RelativeResourceManager/Template/Module_4/Podcasts_M4/IBL_4.1
(Introduction to Torts).mp3">
CSS:
table
{
margin-top: 1em;
margin-bottom: 1em;
font-weight: normal;
font-size: 1em;
line-height: 1em;
font-family: 'Arial';
color: #00;
line-height: 1em;
}
tr /**/
{
max-height: 95px;
text-overflow: ellipsis;
overflow: hidden;
}
td.column_leftmost
{
width: 4.438em;
}
td.column_leftmost img
{
border: 0em; width:100%;
}
td.column_main
{
padding-right: 1.875em;
}
td.column_PDF
{
width: 3.125em;
}
img.pdf_icon {
border: 0em; width:100%;
}
td.column_rightmost
{
width: 3.125em;
}
img.podcast_icon {
border: 0em; width: 100%;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
