5 Correct answers
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.
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.
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>
@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;
}
42
Replies
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;
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.
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
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
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;
}
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
AdChoices
