Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
2

HTML Columns of Various Widths?

Contributor ,
Feb 18, 2024 Feb 18, 2024

Hi everybody, does anybody know how you would make a table in html so you can have columns of different widths within rows of the same table? Would you need to insert tables within the table? I have uploaded a picture to try to explain what I mean.

Basically, I have numerous rows with three columns in, the first column is for images which are all the same size, a 65px square, but the next column for another image which is various widths, the remainder of the row is another column which has text in it. The problem is when you try to make this layout the second column will go to the width of the widest one (which is the second row down) on all of them!

What is the best way of making various width columns across numerous rows? Like in the picture! Thanks for your help.

TOPICS
How to
4.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 5 Correct answers

LEGEND , Feb 18, 2024 Feb 18, 2024

Yes you would use a 2 column nested table inserted within the second column td cell of your main table. Nested tables remain independent, therefore providing more control.

 

However you can achieve the same effect by using a more modern approach such as flex box for the layout............it would be less messy than dealing with tables and table cells, you should avoid those wherever possible.

Translate
Community Expert , Feb 19, 2024 Feb 19, 2024

Add the following code in the <style> section of your document

        table,
        th,
        td {
            border-collapse: collapse;
        }

 

Having said that, have a look at the deprecated attributes for the HTML table element.

Translate
Community Expert , Feb 20, 2024 Feb 20, 2024

I'll repeat what @Nancy OShea has stated previously

 

Tables suck!  

BenPleysier_0-1708467088670.pngexpand image

 

Translate
LEGEND , Mar 03, 2024 Mar 03, 2024
quote

Is it possible to make a cell (column) width fit the content and another to expand to fill the remaining space? 


By Gareth_Williams

 

Use white-space: nowrap where you have the 3 rows. Set each of the 3 td cells:

<td style="white-space: nowrap"></td>

 

Then set the last column to width 100%:

<td width="100%"></td>

 

 

Translate
LEGEND , Mar 08, 2024 Mar 08, 2024

 


Gareth_Williams wrote:

 However, as you can see here, http://www.maximum-robot.co.uk/Flags15px.html you can’t put an image and text in the same cell without the cell becoming higher. Is there a good reason for that?


 

 

Add the below to your css styles:

 

td img {
vertical-align: bottom;
} 

 

Translate
Community Expert ,
Feb 18, 2024 Feb 18, 2024

What you have pictured are nested tables. So in rows 2-5 in the right hand column of your outermost table are actually nested tables within that column. So each cell would have a containing table with 1 row x 2 columns with the varying widths.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 18, 2024 Feb 18, 2024

Yes you would use a 2 column nested table inserted within the second column td cell of your main table. Nested tables remain independent, therefore providing more control.

 

However you can achieve the same effect by using a more modern approach such as flex box for the layout............it would be less messy than dealing with tables and table cells, you should avoid those wherever possible.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 18, 2024 Feb 18, 2024

Thanks guys. I’ll try it with in both methods, tables and cells and flex box, and see which I prefer. I will try the tables and cells method first and upload the file just to confirm it has worked before ticking the “correct answer” I did that example in Illustrator just to show you what I mean! Thanks again.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 18, 2024 Feb 18, 2024

Using Flexbox could be as simple as the example code below: (I've just added some inline widths to the second 'column' to simulate the various widths of the images.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
.rowWrapper {
width: 90%;
margin: 0 auto;
}
.row {
display: flex;
margin: 0 0 2px 0;
}
.row div:nth-child(1) {
width: 65px;
background-color: tomato;
}
.row div:nth-child(2) {
background-color: darkseagreen
}
.row div:nth-child(3) {
flex: 1;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="rowWrapper">

<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 200px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->


<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 300px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->

<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 150px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->

<!-- start row -->
<div class="row">
<div>Img 1</div>
<div style="width: 250px;">Img 2</div>
<div>Img Text</div>
</div>
<!-- end row -->


</div>
<!-- end rowWrapper -->

</body>
</html>

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 18, 2024 Feb 18, 2024

Thanks, I'll try that flex box in a minute. With my tables, I’ve run into a problem already. I’ve inserted the table in the cell where it should be. Actually, I wanted my inserted table to have two rows, and three columns. Not what I said in my original post I know! Anyway, the inserted table has an inside border which I do not want. I did not see an option to create or remove this. However, I can't attach a HTML file. I'll upload a screensaver in a bit! Thanks again.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 18, 2024 Feb 18, 2024

Thanks, Osgood. I’ve posted your Flex Box code in to a DW file. I should be able to turn it into the layout I have with some experimentation and further research. In the meantime I have made the actual full layout I’m trying to do in Illustrator. The colours don't matter! This is just to show the layout. This time I have put the right amount of rows and columns in the inserted tables! As you can see the first two columns in the inserted table are divided into two rows, However, the third column does not require any rows. Thanks again.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 18, 2024 Feb 18, 2024

Ok, so here is the screen saver of the version with the inserted tables. Obviously I’ve only inserted the table into two of the rows so far but like I said, it works perfectly well except for the borders. How disappointing!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 18, 2024 Feb 18, 2024
quote

Ok, so here is the screen saver of the version with the inserted tables. Obviously I’ve only inserted the table into two of the rows so far but like I said, it works perfectly well except for the borders. How disappointing!


By Gareth_Williams

 

I forget how tables work. Try adding css on your tables:

 

border-collapse: collapse;

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 18, 2024 Feb 18, 2024

Where should I put that code? This is the code for the whole file …

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF=".\favicon.ico">
<title>MAXIMUM ROBOT - LIVE</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
.MainText1 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 13px;
color: #666;
}
.BlackText {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #666;
}
.WhiteTop {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
color: #333;
}
</style></head>

<body bgcolor="#333333" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><center>
<table width="980" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="65" rowspan="9" align="center" valign="top" bgcolor="#ffffff" class="MainText1"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td height="20" colspan="2" align="center" valign="top" bgcolor="#333333" class="WhiteTop"><p>&nbsp;</p></td>
<td width="65" rowspan="9" align="center" valign="top" bgcolor="#ffffff" class="MainText1"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="30" colspan="2" align="center" valign="top" bgcolor="#666666" class="MainText1"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="30" colspan="2" valign="top" bgcolor="#333333"><p class="BlackText">Thanks for your help Adobe Forum! 🙂 &hellip;</p></td>
</tr>
<tr>
<td height="20" colspan="2" valign="top" bgcolor="#666666" class="MainText1"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td width="65" height="65" valign="top" bgcolor="#AA2222" class="MainText1"><p>&nbsp;</p></td>
<td valign="top" bgcolor="#999999" class="MainText1"><table width="785">
<tbody>
<tr>
<td width="200" height="40" bgcolor="#666666">&nbsp;</td>
<td width="300" bgcolor="#333333">&nbsp;</td>
<td rowspan="2" bgcolor="#666222">&nbsp;</td>
</tr>
<tr>
<td height="25" bgcolor="#333333">&nbsp;</td>
<td bgcolor="#666666">&nbsp;</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="65" valign="top" bgcolor="#AA4444" class="MainText1"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td height="65" valign="top" bgcolor="#999999" class="MainText1"><table width="785">
<tbody>
<tr>
<td width="300" height="40" bgcolor="#666666">&nbsp;</td>
<td width="200" bgcolor="#333333">&nbsp;</td>
<td rowspan="2" bgcolor="#666444">&nbsp;</td>
</tr>
<tr>
<td height="25" bgcolor="#333333">&nbsp;</td>
<td bgcolor="#666666">&nbsp;</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="50" colspan="2" valign="top" bgcolor="#FFFFFF" class="MainText1"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="65" valign="top" bgcolor="#AA4444" style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-size: 16px;"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td height="65" valign="top" bgcolor="#999999" style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-size: 16px;"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td colspan="2" valign="top" bgcolor="#999999" style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif; font-size: 16px;"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="20" colspan="4" align="center" bgcolor="#666666" class="BlackText"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
</table>
</body>
</html>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 19, 2024 Feb 19, 2024
quote

Where should I put that code? This is the code for the whole file …

 

By Gareth_Williams

 

Have a look at Bens response below, that will eliminate all the borders/spacing.

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 18, 2024 Feb 18, 2024

Tables suck!  😝

  • Not responsive.
  • Horrible with screen readers.
  • A bad user experience on mobile devices.

 

I haven't used a website table in 10 years and that was for an invoice (tabular data).

 

There's isn't much you can't do with Bootstrap columns (based on flexbox), alone or with offset & margin classes. 

https://getbootstrap.com/docs/5.0/layout/columns/

 

I highly recommend learning to use Bootstrap. It will save you hours of development time.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 18, 2024 Feb 18, 2024

As @Nancy OShea  has stated, Bootstrap is the way to go. The following is and example.

 

 

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-4">
        <div class="d-flex">
            <div class="bg-primary-subtle" style="width: 65px;">
                <p class="mb-0 p-2">65px</p>
            </div>
            <div class="bg-danger-subtle">
                <p class="mb-0 p-2">variable width</p>
            </div>
            <div class="flex-grow-1 bg-success-subtle">
                <P class="mb-0 p-2">the rest of the row</P>
            </div>
        </div>
        <div class="d-flex">
            <div class="bg-primary-subtle" style="width: 65px;">
                <p class="mb-0 p-2">65px</p>
            </div>
            <div class="bg-danger-subtle">
            </div>
            <div class="flex-grow-1 bg-success-subtle">
                <P class="mb-0 p-2">the rest of the row</P>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

 

 

 

With this as the result

BenPleysier_0-1708306766389.pngexpand image

 

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 18, 2024 Feb 18, 2024

If you want two rows per 65px image and three columns:

 

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
    <div class="container mt-4">
        <div class="row bg-primary-subtle">
            <div class="col align-self-center" style="max-width: 65px;">65px</div>
            <div class="col gx-0">
                <div class="d-flex">
                    <div class=" bg-danger-subtle">
                        <p class="mb-0 p-2">variable width</p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0 p-2">variable</p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="bg-danger-subtle">
                        <p class="mb-0"></p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0 p-2">variable width</p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
            </div>
        </div>
        <div class="row bg-primary-subtle">
            <div class="col align-self-center" style="max-width: 65px;">65px</div>
            <div class="col gx-0">
                <div class="d-flex">
                    <div class="bg-danger-subtle">
                        <p class="mb-0 p-2">variable width</p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0 p-2">larger variable width</p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="bg-danger-subtle">
                        <p class="mb-0 p-2">some more text to increase the size</p>
                    </div>
                    <div class=" bg-warning-subtle">
                        <p class="mb-0"></p>
                    </div>
                    <div class="flex-grow-1 bg-success-subtle">
                        <P class="mb-0 p-2">the rest of the row</P>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

 

 

With this result

BenPleysier_0-1708309044607.pngexpand image

 

 

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 19, 2024 Feb 19, 2024

Thanks Ben, I’ll paste that code into a file and experiment with it this evening after work. The problem at the moment is the two columns to the right of the blue squares do not divide into two rows like in my example (HTML Table2) above and this screen saver of the actual HTML file in a browser. If I knew how to get rid of those borders that would work! Something must define the colour of those stupid borders so maybe the same thing can get rid of them? Thanks again.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2024 Feb 19, 2024

Add the following code in the <style> section of your document

        table,
        th,
        td {
            border-collapse: collapse;
        }

 

Having said that, have a look at the deprecated attributes for the HTML table element.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 19, 2024 Feb 19, 2024

Thanks Ben, you are a genius! That code worked. I will finish the file with the tables method first and then try to replicate it in with Flex Box method after. I have copied that link to look at later as well. Thanks again.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 20, 2024 Feb 20, 2024

I’ve started trying to fill the page with the text and images after a marathon in this thread working out how to make the layout but I’ve run into a problem again! When you put text in the nested table, the text ignores the text properties you select in the properties window. If you have text outside of the nested table, in a normal cell, the controls work as usual.

 

Also, could somebody tell me how to make a text class, style or rule, or whatever it’s called, so the text settings appear in the “class” dropdown menu in the HTML panel of the properties window? I thought this would be easy or obvious but after an hour of searching in Google and YouTube I have not found any answers! Thanks again for your help.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2024 Feb 20, 2024
quote

I’ve started trying to fill the page with the text and images after a marathon in this thread working out how to make the layout but I’ve run into a problem again! When you put text in the nested table, the text ignores the text properties you select in the properties window. If you have text outside of the nested table, in a normal cell, the controls work as usual.

 


By Gareth_Williams

 

That's probably as a result of not applying the css class to the nested table td cell?

 

If you want to target all of the td cells in the parent table and the child (nested) tables then just target the td cell:

 

td {

font-size: 14px;

color: red;

}

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 20, 2024 Feb 20, 2024

I have done it now. Actually, by default it does work inside the nested tables too. I just didn’t select the style in the menu for some reason. I was trying to make it again! This didn’t work. My bad!

 

Anyway, my layout has been screwed up anyway! The original layout without the nested tables was squares of 65px and the columns to the right of it split into two rows, one of 50px H for an image and one of 15px H for some 13px text underneath it.

 

However, in the nested tables, as far as I can tell, you can’t get a row as narrow as 15px. Basically those stupid borders are still there in the dimensions. Presumably it just changes them to the same colour as the cell so you can’t see it. I guess that’s what’s going on behind the scenes anyway.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 20, 2024 Feb 20, 2024

I'll repeat what @Nancy OShea has stated previously

 

Tables suck!  

BenPleysier_0-1708467088670.pngexpand image

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 21, 2024 Feb 21, 2024

Yeah, I guess they do. I'll try it with Flex Box next. If anybody has any ideas how to take borders out of nested tables I'd love to hear it. It's got the border in the same colour as the cell. You can see it when you put an image in!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 21, 2024 Feb 21, 2024
quote

If anybody has any ideas how to take borders out of nested tables I'd love to hear it. It's got the border in the same colour as the cell. You can see it when you put an image in!

By Gareth_Williams

=========

When a dieter asks for junk food, I'm tempted to offer them a healthier option. 😁

 

That said, see this link:

https://stackoverflow.com/questions/2039438/removing-unwanted-table-cell-borders-with-css

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 22, 2024 Feb 22, 2024

Thanks Nancy. I have sorted that out now but now there’s another problem! Does anybody know of any good reason why you can have 15px rows in a normal table but you can’t have the rows that thin in a nested table? Look at this screen shot! The rows next to the top image are normal cells in the main table. As you can see the 15px high row is no problem. The two rows are 50px and 15px the square image is 65px.

The rows next to the bottom image are done in a nested table. As you can see 15px high row will not go that thin. The rows in the nested table are still set at 50px and 15px and the square image 65px.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 22, 2024 Feb 22, 2024

Does the td cell of the nested table have a &nbsp; (non-breaking space) in it? I haven't used tables for producing layouts in years but l seem to remember a &nbsp; might have a height of more than 15px. Back in the day we used to hack table layouts by inserting a 1x1 pixel transparent gif into the cell which l think made it collapse to that height.

 

As l said l think you're trying to be too specific in terms of forcing everything to adhere to a certain height, particularly if you have text in a cell. Images shouldn't be an issue as the table cell will collapse to the images default height whether you specify a height or not. Table cell height was never really supported in browsers, as far as l can remember it was hit and miss.

 

Modern web development apart from where a logo or icon is concerned doesn't usually require an image is set to a specific height, it takes into account responsiveness which allows the image to adapt to various situations.

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines