I want to draw a horizontal line after every rows of my data
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>
data a
</td>
</tr>
<hr/>
<tr>
<td>
data b
</td>
</tr>
</table>
</body>
</html>
but my output for my codes is like this
__________________________________________________________
data a
data b
expect results
data a
__________________________________________________________
data b
additional question
if let's say I have a few tables rows but some rows doesn't requires the horizontal line can I do something like
.styletr {border-bottom: 1px solid black;}
and then
<tr class=styletr>
</tr>
?
I don't think you can use hr inside a table, you are better off using css:
<html>
<head>
<link href="YourCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
and inside "YourCss.css":
tr { border-bottom: 1px solid black; }
EDIT: This will, however, put a border at the bottom of every table row, including the last row, to exclude the last row you will need something like
tr:not(:last-child) { border-bottom: 1px solid black; }
EDIT 2: For greater control over which rows are styled, you should use a class:
<tr class="seperator">...</tr>
.seperator { border-bottom: 1px solid black; }
The most common method is to use CSS to set the border property of your element, as such:
tr {
border-bottom: 1px solid #000;
}
In the case of your code, the hr element would not make sense to use.
<hr /> is no longer used as a physical separator between two html sections in HTML5 (see this). Instead it is now a logical separation. You could use border instead.
You cannot place elements between tr tags of a table. The browser will simply relocate it to outside of the table when rendering.
One option would be to put it in it's own row with a single cell spanning the width of the table
<tr><td><hr /></td></tr>
(If you have more columns use colspan like so)
<tr><td colspan="3"><hr /></td></tr>
Alternately, if you really only have one column in your table, just move the HR tag into the tag so it's inside the cell.
You could also consider (and I encourage you to) replace the HR tag with bottom borders on the table rows, as other answers have suggested, as that is a much better design approach.
It's not valid <html> to put anything except <tr>, <thead> or <tbody> as a direct child of a <table> element.
Instead, perhaps try adding css:
tr { border-bottom: 1px solid black; }
try this :
<td>
<hr />
</td>
if it's an email content
Related
I have a <table> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <tbody> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <tbody> tags.
I've tried some variations of page-break-inside: avoid and page-break-after: auto, but can't seem to get it to work in Chrome 42 (see screenshot below)
However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like page-break-* might only apply to block level elements. Is there a good way to accomplish this in html/css?
Example code:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Here's a JSFiddle that'll give you a bit of an idea of what I'm trying to accomplish.
Edit: I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.
Try wrapping it all in a
make that specific a block element (http://learnlayout.com/inline-block.html)
then use page-break-*
I have multiple JSPs that each contain one or more tables.
fragment1.jsp:
<table class="foo">
<tr>
<td>stuff</td> <td>stuff2</td>
</tr>
</table>
fragment2.jsp
<table class="foo">
<tr>
<td>more stuff</td> <td>more stuff2</td>
</tr>
</table>
<table class="bar">
<tr>
<td>whatever</td>
</tr>
</table>
They are used by wrappers in different configurations:
wrapper1.jsp
<s:include value="fragment1.jsp" />
<s:include value="fragment2.jsp" />
wrapper2.jsp
<s:include value="fragment2.jsp" />
If fragment2.jsp comes after fragment1.jsp, I want these two tables to have no margin between them and appear as one table. However, if either one is alone, I want them to be formatted normally as "foo" tables are styled.
Is there a way to indicate this styling preference in some way such that the two "foo" tables will appear as a single table when adjacent, but otherwise style themselves normally?
I am somewhat new to Struts/JSP and dealing with some kludged legacy code, so please help me understand if this problem would be better solved through another approach.
It is actually possible with CSS only, without JavaScript and without changing the HTML.
A full screen demo is worth a thousand words...
Basically, you need to use border-collapse: collapse; and specify the following settings:
When the table is alone, all the borders and margins normally set:
table {
border-collapse : collapse;
border : 4px solid black;
margin-top : 20px;
margin-bottom : 20px;
}
When the table is adjacent to one or more other tables:
If it's not the first, remove margin-top and border-top:
table + table {
margin-top : 0;
border-top : none;
}
If it's not the last: remove margin-bottom and border-bottom:
table:not(:last-child) {
border-bottom : none;
margin-bottom : 0;
}
Also ensure to avoid setting a border on the last <tr> of each table:
tr:not(:last-child) {
border: 1px solid silver;
}
It's better to use javascript and jquery for doing such works. So I think this can be helpful:
$(document).ready(function(){
var secondTable = $(".bar").html();
$(".foo").append(secondTable);
});
Note, you need to include jquery library if you have not included it already.
There's no need to use tables if you don't use tabular data. You can always use div or span tags.
<div class="foo">
<span>more stuff</span> <span>more stuff2</span>
</div>
<div class="bar">
<span>whatever</span>
</div>
The CSS selector table.foo + table.foo will select every element of table.foo that appears after another element of the same type.
You can use it to remove the margin from all following table.foo elements:
table.foo + table.foo {
margin-top: 0px;
margin-bottom: 0px;
}
If it should apply to the second element only, use table.foo:nth-child(2) instead.
http://codepen.io/louisverdiguel/pen/vCJFh
this is my first time here i hope i am doing it right.
html
I have created a string of rows and columns with html for a client to "resemble" a spreadsheet.
CSS
I have created a css class class="sale td"
within the class .
.sale td {border: 1px solid grey; }
to have a border show for each row
issue: i would like to remove the border from any <tr> that contains a <h2> tag
how would i go about creating such a specific class or action with the CSS and what is this method called?
You can try like this: LINK
CSS:
.sale tr.no_border td {
border: 0px !important;
}
HTML:
<tr class="no_border">
<td colspan="3" align="left" valign="top"><h2>Bottles</h2></td>
</tr>
You can only try to add style tag to each row, for which you want to remove the border.
For example:
<td colspan="4" align="left" valign="top" style="border:none;">
You can't go backwards like that setting styles for a tag based on tags inside it. You have to mark the tr/td with a class if it contains a h2 in order to do this.
Edit:
An example.
CSS
.noborder {border:none !important}
"!important" ensures it overrides the other CSS style.
HTML
<td class="noborder">
Edit2:
Also ".sale td" in your CSS means any <td> inside a block (table in this case) with a class of "sale". So you don't set a class of "sale td" on your <table> - but just "sale"
For every row you can use this css:
.sale td {border: 1px solid grey; }
but for the rows with <h2> in it:
.sale tr.no-border td {
border: 0px !important;
}
and your html will look like:
<tr class="no-border">
<td colspan="3" align="left" valign="top"><h2>Heading</h2></td>
</tr>
Using CSS, how do I set the formatting of just a single cell or a single column?
Use the ID selector to target just that one element of the page, in this case, a table cell:
<tr>
<td id="foo"></td>
</tr>
Then in the CSS:
#foo
{
//-- CSS styling goes here just for this element only
}
That hash symbol (#) marks that name selector as belonging to an id. You can further lock it down in the stylesheet to apply only to a TD cell with that ID like so:
td#foo
{
//-- CSS styling goes here just for this element only
}
If you add in the rowspan attribute into the TD, you'll be able to turn that into a column and keep the styling you may have set out.
<td id="foo" rowspan="3"></td>
If you mark the CSS selector name with a preceding period (.), like this:
.foo
{
//-- CSS styles
}
that will target class selectors in the HTML and you can style more than one matching element if you apply the CSS class attribute to the tag, like so:
<tr>
<td class="foo"></td>
<td class="foo"></td>
<td class="foo"></td>
</tr>
Don't use CLASS unless it will appear more than once on the page.
Give the cell a class name and style the class.
<td class="cellClass">test</td>
.cellClass { color: #a9a9a9 }
For table cells, you'll need to give it some sort of identifier such that you can refer to it. Depending on your needs, this will be either a class or an id.
<td class="specialCell">...</td>
In your CSS you can then apply different formatting:
.specialCell { color: red; }
If you want to apply different styles to a column, there is the <col> tag, but browser support is limited. You're probably better to apply that class to all elements manually (or by using Javascript)
You can style the COLGROUP that applies:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#special { background:yellow }
</style>
</head>
<body>
<table>
<colgroup></colgroup>
<colgroup id="special"></colgroup>
<tr>
<td>a</td>
<td>1</td>
</tr>
<tr>
<td>b</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Check out the HTML <col> and <colgroup> tags, which allow you to apply formatting to entire columns or adjacent groups of columns at once.
give the cell/column a class or id and use css to apply the formatting to that
you can assign two names to a column. ex
<div class="foo"></div>
<div class="foo bar"></div>
<div class="foo"></div>
div.foo { color: #fff; }
div.bar { background-color: green; }
perhaps that could solve your problem?
I've got some code that puts a line-through on a TR for deleted rows, but this means that my "Actions" column (that only has) buttons suffers. This is because there are individual spaces between the buttons, which wind up getting line-throughed as well.
After poking around on W3Schools, it boggles me why this example doesn't work:
<html>
<head>
<style type="text/css">
tr {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
How am I supposed to clear the line-through on child elements?
EDIT
I've updated my example - the problem is that I do not want to take the style off the parent element, just a single child element.
You shouldn't have to use important or inline styles for this. Try
h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}
EDIT
In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:
tr td { text-decoration: whatever }
and then when needed
<td style="text-decoration: none;"></td>
There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.
EDIT: Given your example, why not just apply the line-through to TD elements individually
<html>
<head>
<style type="text/css">
td.deleted {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td class="deleted">this needs to be line-throughed</td>
<td>This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
The line-through is applied to the H2, so you have to take it off of the H2.
<html>
<head>
<style type="text/css">
h2 {text-decoration:line-through}
h2.alt { text-decoration: none; }
h2.alt span { border: 1px solid black; }
</style>
</head>
<body>
<h2>Line-through</h2>
<h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
</body>
</html>
(Viewable here: http://jsbin.com/anopa/)
The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.
Edit: updated example
One way to fix this would be to change
tr {text-decoration:line-through}
to
tr td {text-decoration:line-through}
As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.
BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.
Try This
<html>
<head>
<style type="text/css">
tr td {text-decoration:line-through;}
tr td.noline { text-decoration:none;}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td class="noline">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
Notice that the style is "tr td" for both.
<td style="text-decoration: none>
It works, unless what you're trying to uncross is a link to a URL.
Then this phrase also defeats the link.