I have a table, where the left-most cell spans the entire height of the tbody via rowspan. The content of this cell can need more height than the rest of the table. I want the height of the rows to the right of the rowspanned cell to be evenly distributed over the height of the table.
In Firefox and IE it works as intended, but in Chrome I have whitespace above the topmost row:
As you can see in the grayed line, Chrome has unused whitespace above the gray line. This only happens when the left cell has content which needs more height than the combined height of the other cells.
Code of the table used:
<html>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Multiline<br>text<br>longer<br>than<br>rows</td>
</tr>
<tr style="background-color:gray">
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
</tbody>
</table>
</body>
</html>
I tried cheating the renderer by setting the height of the first tr (which only contains the rowspanned cell) to 0px, but Chrome doesn't like a height of 0. It only reacts to the height definition, when it is at least set to 1px.
Question: Does anybody have an idea how to make Chrome behave like FF and IE?
P.S.: The idea of setting the rowspanned cell in its own line was a result of some other question here on SO by someone else in the past, which solved another problem I had back then. (By accident I didn't test this particular page in Chrome back then, so I don't have an exact memory now of which problem I solved with this back then. Sorry.)
Your rowspan cell and the top Bla cells should be in the same row. Then you only have 3 rows in the table so change to rowspan=3.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Multiline<br>text<br>longer<br>than<br>rows<br>a<br>b</td>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
</tbody>
</table>
Related
I'm using a Vuetify table with multiple columns like so
Reproduction link
<v-table>
<thead>
<tr>
<th v-for="index in 10">Header {{ index }}</th>
</tr>
</thead>
<tbody>
<tr v-for="rowIndex in 10">
<td v-for="columnIndex in 10">
<v-card>
<v-card-title>Cell in row {{ rowIndex }} in column {{ columnIndex }}</v-card-title>
</v-card>
</td>
</tr>
</tbody>
</v-table>
For smaller screen sizes the horizontal scrollbar is perfectly fine. But there is a "print mode" where horizontal scrollbars make no sense ( data loss on PDF file ). So regardless of the actual table width I would like to prevent a horizontal scrollbar ( I'm aware that this might look very ugly ). I think this problem is not related to Vuetify, I think this also applies for plain HTML.
I tried to disable the horizontal scrollbar via overflow-x: hidden;
div {
overflow-x: hidden;
}
td {
padding: 20px;
background: red;
}
<div>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</thead>
<tbody>
<tr>
<td>I'm a cell in row 1 in column 1</td>
<td>I'm a cell in row 1 in column 2</td>
<td>I'm a cell in row 1 in column 3</td>
<td>I'm a cell in row 1 in column 4</td>
<td>I'm a cell in row 1 in column 5</td>
<td>I'm a cell in row 1 in column 6</td>
<td>I'm a cell in row 1 in column 7</td>
<td>I'm a cell in row 1 in column 8</td>
<td>I'm a cell in row 1 in column 9</td>
<td>I'm a cell in row 1 in column 10</td>
</tr>
</tbody>
</table>
</div>
but unfortunately that didn't help. As you can see there is some content loss on the right side.
Do you have any ideas how to tell the content to shrink as much as possible?
you need to apply css rules differently for print screen
#media print {
body {
overflow-x: visible
}
}
here body is the first parent element of table, you can apply it to the immediate parent of table and it will work in print mode.
overflow-x: visible property will print it adjusting the data in new line in print screen
I have difficulty in using all column space of a row with no border.I want to use the whole row space so that data can be displayed in a line.
As you can see above the grand total is not using whole row it is specific to the column.I have want it to display the way it is in below snapshot.
Please help.
Thanks.
Use colspan attribute for first td of the row you want full width
in your case use colspan=8 for grand total4 records td
Use the colspan property of HTML tables. See here.
This what you have to do:
<html>
<body>
<table border="1">
<tr style="background:grey;">
<th>Date 1</th>
<th>Fund</th>
<th>Company</th>
<th>Subject</th>
<th>Comments</th>
<th>Date 2</th>
<th>Review</th>
<th>People</th>
</tr>
<tr>
<td>02/18/2016</td>
<td>test4</td>
<td>test-c5</td>
<td>test</td>
<td>testing</td>
<td>02/08/2016</td>
<td></td>
<td></td>
</tr>
<tr>
<td>02/18/2016</td>
<td>test4</td>
<td>test-c5</td>
<td>test</td>
<td>testing</td>
<td>02/08/2016</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>02/18/2016</td>
<td>test4</td>
<td>test-c5</td>
<td>test</td>
<td>testing</td>
<td>02/08/2016</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td style="background:grey;">Grand<br/> Totol4<br/> records<br/></td>
<td colspan="7"></td>
</tr>
</table>
</body>
</html>
This is an assignment question.
The table above is what I need to make. The table below is what I came up with:
My code:
<!DOCTYPE html>
<html>
<head>
<title>Question Two</title>
<meta charset="UTF-8">
</head>
<body>
<h2>Nested Tables</h2>
<table border="1">
<tr>
<th>Header column 1</th>
<th>Header column 2</th>
<th>Header column 3</th>
<th>Header column 4</th>
</tr>
<tr>
<td>Row 2 - Item 1</td>
<td>Row 2 - Item 2</td>
<td rowspan="2">
<h4>Row 2: Nested Table 1</h4>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 - Item 4<br/>A second line</td>
</tr>
<tr>
<td>
<h4>Row 3: Nested Table 2</h4>
<table border=1>
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 3 - Item 2</td>
<td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - Item 1</td>
<td>Row 4 - Item 2</td>
<td>Row 4 - Item 3</td>
</tr>
<tr>
<td colspan="4">Row 5 - Last row of outer table</td>
</tr>
</table>
</body>
</html>
Two things are different: the font and line spacing of Nested Table 1 and 2.
As per the font, is there a way to set a default font for all HTML documents to use? If so, how?
For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc. I'm pretty sure it's not a browser issue that caused the erroneous result (tried multiple browsers--I'm using IE, running on Windows 7). Any ideas?
Thank you.
This is just a wild guess but the font you're looking for may be "Calibri" or something very similar. You can add the font-family as an inline style to your body tag and everything in the table will inherit the font.
<body style="font-family:Calibri;"> and here's a demo of it in action.
The spacing seems fine as is, however if you need to make adjustments you can do so with padding, margin, or even cellpadding.
This will pad the space in all the cells by 10: <table border="1" cellpadding="10">
This will pad the top of the cell by 10px: <td rowspan="2" style="padding-top:10px;">
As per the font, is there a way to set a default font for all HTML documents to use? If so, how?
If it's something for "all HTML documents" to use, then it would be a browser setting. You're probably on your own for that one. But if you want something for all of the content in this document to use, that's easy with CSS. Something like this:
<style>
body {
font-family: Arial;
font-size: 1em;
color: #000;
}
</style>
Putting that in the head of the HTML would apply that styling to the entire contents of the body tag, including all descendants. (You can also put the CSS code in a separate file and use a <link> tag to reference it in the head. As the code grows in complexity, this quickly becomes a preferred approach.)
For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc.
I'd use CSS for this as well. First, identify the element(s) you want to target. An id or a class is often a good approach. For example:
<td rowspan="2" id="column3Cell">
Then in the CSS you can target that element and apply styling to it:
#column3Cell {
padding-top: 10px;
}
Adjust as necessary. Since the goal here is to replicate a screen shot as exactly as possible, approximating it is going to take some tweaking and trial-and-error. But there is a lot you can do with CSS styles here.
<table border="1">
<thead>
<th>Header Column 1</th>
<th>Header Column 2</th>
<th>Header Column 3</th>
<th>Header Column 4</th>
</thead>
<tbody>
<tr>
<td rowspan="">Row 2 - Item 1</td>
<td>Row 2 -Item 2</td>
<td rowspan="2">Row 2 : Nested Table1
<br>
<br>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 : Item 4 <br> A second Line</td>
</tr>
<tr>
<td>
<br>
Row 3- Nested Table 2
<br>
<br>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 3 -item 2</td>
<td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - item 1 </td>
<td>Row 4 - item 2</td>
<td>Row 4 - item 3 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Row 5-Last row of outer table</td>
</tr>
</tfoot>
</table>
I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?
For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.
The same way you would if you were drawing out the table on paper:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<!-- your data goes here -->
</tbody>
</table>
You need to have two separate header rows:
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Number</th>
<th>Address</th>
</tr>
Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>
Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:
What's your preferred way of writing HTML tables that have vertical headers?
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
Header 1 data data data
Header 2 data data data
Header 3 data data data
They look like this, so far I've come up with two options
First Option
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.
Second Option
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
So, both ways render the table how it should, here a pitcure:
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.
Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.
The First Option... I think it is the better and simple approach..
Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.
<asp:Repeater ID="hours" runat="server">
<HeaderTemplate>
<table id="vertical-table">
<thead>
<tr>
<th colspan="0">hours:</th>
</tr>
<tr>
<th colspan="1">Monday</th>
</tr>
<tr>
<th colspan="1">Tuesday</th>
</tr>
<tr>
<th colspan="1">Wednesday</th>
</tr>
<tr>
<th colspan="1">Thursday</th>
</tr>
<tr>
<th colspan="1">Friday</th>
</tr>
<tr>
<th colspan="1">Saturday</th>
</tr>
<tr>
<th colspan="1">Sunday</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Container.DataItem %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
div.vertical {
margin-left: -85px;
position: absolute;
width: 215px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
<table>
<thead>
<tr>
<th class="vertical">
<div class="vertical">Really long and complex title 1</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 2</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 3</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>a, b, c</td>
<td>1, 2, 3</td>
</tr>
</tbody>
</table>