With all your help, I nearly did it; but

HTML & CSS
1

…there’s always one problem.

Thanks to the contributors on this site, I have managed to complete most of my tables, and in fact,did complete one on my own, with no coing errors and with perfect results.

I almost completed another, but am left with the feeling that I have cheated a bit to get the desired result.

It;s the very first cell, top left.

HTML is:

<td colspan=“3”>Administrative County of<div style=“text-decoration:underline; display:inline;”>     Dorset     </div></td>

Web page is: www.c5d.co.uk/1891.php
Css is at www.c5d.co.uk/census1891.css

What I want the CSS to do is continue the underlining either side of the word Dorset and run right up to the word of on it’s left.

Is it possible. ? It doesn’t seem possible to underline padding,margin or even whitespace

I tried bottom-border: 1px;
bottom-border-style: solid worked but looked like someone had underlined it with a felt tip rather than the word being underlined.

Am I asking too much of CSS ?

Antony

2

You could do it like this, though you may not like where the border sits:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

span {padding: 0 60px; border-bottom: 1px solid #000;}

</style>
</head>
<body>
<table>
	<tr>
		<td>Administrative County of<span>Dorset</span></td>
	</tr>
</table>

</body>
</html>
3

Thanks for the suggestion.

Sadly you were right, it doesn’t display very well.

I guess I shall have to put up with what I have

Antony

4

Is that just because of the position of the underline? That’s probably adaptable.

5

I would like to offer a modification of Ralph’s code that you might be happy with.


  <td colspan="3" [color=blue]class="county"[/color]>Administrative County of<span>Dorset</span></td>



[color=blue].county span {
    display:inline-block;
    line-height:1;
    border-bottom:1px solid #000;
    padding:0 2em;
}[/color]
6

That does the trick thanks.

May I ask a question about something else on this web page.

The styling of the curly brace is great but at the bottom of page 4, it merges into the text slightly.

I can see why it does it. Because the column is slightly narrower, but why should the column be narrower when the cell with the most text in it is the same.

And the style is the same.

It’s not desperate for a solution, but I’d just like to know why !

7

Remember that table cells adapt to the width of their contents (unless table-layout:fixed is applied).

If you look at the the third line of data in rightmost column, the text “Imbecile from Childhood” is pushing that column wider than the rightmost column in the pages above. As a result, the columns to the left have to squeeze a bit to adapt. It happens that the second column is the most “squeezable”.

You could try inserting <br> tags around the word “or” in the header of column 11 and see if that allows column 11 to absorb some of the squeezing. If it does not, or if the amount is unsatisfactory, then we will need to take a closer look at the column widths and the “pressures” (the data) in each one. You may actually want to give one row of <td> tags column classnames so meaningful widths can be applied to the columns, even though those widths will still be flexible.

8

Thanks for the advice. I knew that the columns expanded but assumed that the width of the entire table would go wider as well.

Styling the phrase in the box so that the text is smaller solves the problem

Thanks again

Antony

9

If the table did not have a width assigned that is greater than its default (normal) width, your assumption would be true. However, the table has a width:100% assigned, therefore it is stretching wider than it normally would which in turn adds empty space within the cells. By expanding the contents of one of the cells, other cells with unoccupied space are compressed.
You can demonstrate this by temporarily adding an inline style in that particular table tag <table style="width:auto"> and see if the width becomes narrower than the others. That is why the table does not become wider. It doesn’t need to. The cells still have room to hold their contents.