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:
table border=1px cellpadding=10px cellspacing=1px
tr
td class=column_leftmostimg alt= border=0
src=../../Images/M4/gavel.png //td
td class=column_maina href=Topics/4.1/Introduction to
torts.htmlTopic 1: Introduction to torts/adiv
class=topic_descriptionThis topic provides an introduction to the law
of torts./div/td
td class=column_PDFa title=Download PDF [83 KB]
href=/webct/RelativeResourceManager/Template/Module_5/PDFs_M5/5.1.pdfimg
class=pdf_icon alt=PDF icon src=../../Images/Common/pdf_icon.png
//a/td
td class=column_rightmosta title=Download Podcast [5.61MB]
href=/webct/RelativeResourceManager/Template/Module_4/Podcasts_M4/IBL_4.1
(Introduction to Torts).mp3img class=podcast_icon alt=Podcast
icon src=../../Images/Common/podcast_icon.png //a/td
/tr
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
***
