I have a bootstrap container and a boostrap table like this
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
I want to keep my container and no line breaks in my table. If I get one long row in my table it goes under my container (content to the right is hidden in my table). How can I make my table overlap my container to the right if there is lot of content in the table?
It's kinda hard to help without the CSS but based off what I know, I'd try setting white-space: nowrap;
.container{
z-index: -1;
}
Related
I have a long table with header and footer. What I want to do is to create a print function on the table. Below is an example of my code:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
<table>
<thead>
<tr>
<td>This is a header</td>
</tr>
</thead>
<tfoot>
<tr><td>This is a footer</td></tr>
</tfoot>
<tbody>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
</tbody>
</table>
From the code above, when it comes to printing process, it shows that every printed page has its own header but it doesn't work out with their footer. My question is, how to display a footer in each of the long printed page.
From The CSS table model,
Print user agents may repeat header rows on each page spanned by a
table.
Print user agents may repeat footer rows on each page spanned by a
table.
In fact, most browsers do this.
Chrome implemented it only for headers (bug 24826) but not for footers (bug 620223).
I don't think there is much you can do.
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>
I'm using Bootstrap and have a table with the following structure and style:
<table class="table table-bordered">
<tr>
<th>Keyword</th>
<th>AdWords top</th>
<th>AdWords right</th>
<th>AdWords total</th>
<th>URLs of top AdWords</th>
<th>URLs of right AdWords</th>
<th>Non-Adwords results</th>
<th>Non-Adwords urls</th>
<th>Total links on page</th>
<th>Total SERP results</th>
<th>Cached SERP</th>
</tr>
....
However, when I'm printing out my data, it looks really ugly:
That is why I have several questions:
How to make a normal width of a column with a text inside <th> elements in order to fit the text inside the cell
How to make al the text inside <th> aligned by center
It seems like you are missing "thead". For bootstrap styles to correctly apply, you need to make sure you're html markup is correct.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Solved!
In SCSS file add a new custom class:
.withoutTransfer{
white-space: nowrap;
}
Then use it in table:
<thead>
<tr class="withoutTransfer">
....
</tr>
</thead>
Now the table headers looks pretty.
try this
setting widths for your table cells if you apply the rule 'table-layout: fixed' to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
`table-layout: fixed; width: 100%`;
I'm having a werid problem making a super simple table without any css mods.
The code is the following:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2<td>
<td>ARGENTINA<td>
<td>7379<td>
</tr>
<tr>
<td>3<td>
<td>CHILE<td>
<td>6543<td>
</tr>
<tr>
<td>4<td>
<td>EGYPT<td>
<td>6512<td>
</tr>
</table>
I'm getting crasy in trying to find what's wrong in this super simple code about why is it that the table header's columns refuse to align with its respective values?
It seems that there's an extra ghost column being created.
Can anyone explain, please?
Your lines are missing the closing . You have where the closing tags should be.
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Your doesn't have a closing tag.
Try this:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Then it looks like it tries to create closing tags for each... And as a result you are ending up with weird extra columns.
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>