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.
Related
I have a Bootstrap table, I want to remove the lines between some of the rows in the table (at the end of the table) is there a quick way to achieve this?
You can remove the border from Bootstrap tables using the following CSS:
.table>tbody>tr>td,
.table>tbody>tr>th {
border-top: none;
}
This will override Bootstrap's td and th selector specificity and apply your border-top style instead of theirs.
Note that this will only apply to tr elements within the tbody. You'll need to add in styling for the thead and tfoot elements if you want this to work for those as well.
Now where you specify some of the rows, I'm guessing you don't want this applying to all of them. For that, simply add a new class to the tr elements you wish remove the border on, and include that class name in your CSS selector(s):
<tr class="no-border">...</tr>
.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
border-top: none;
}
For the rows in which you don't want border's to appear. Give them an additional class and add the border:none property to it.
For Ex : If you give the additional class name as .noborder to the element of the row.
Hope this helps you.
.noborder{
border:none;
}
<table border="1" width="100%">
<tr><td>Data 1</td></tr>
<tr><td>Data 1</td></tr>
<tr ><td>Data 1</td></tr>
<tr><td class="noborder">Data 1</td></tr>
<tr><td class="noborder">Data 1</td></tr>
</table>
You may use border-bottom: none; in your right selector. Please provide your html code so that we can figure out and analyze your structure.
<table class="table no-border">
<tr>
<td></td>
</tr>
</table>
i think you want to remove two remove vertical line between two row or column
go through this link to see demo LInk :- http://v4-alpha.getbootstrap.com/content/tables/
also you can apply
.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
border-top: none;
}
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
I have created a couple of tables. now i need both tables to be next to each other and not one table on top of each other. how can i position the second table next to the first one (to the right) but with sufficient space in between?
this is some code of my second table:
<table>
<h3>Personaldaten</h3>
<tr>
<td>Externe Referenz:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
<tr>
<td>Titel:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
above are 2 entities from the first table, how do i proceed like this?
Try to use a wrapper around the tables and use float:left;
//margin: top right bottom left
<div style="width:500px; margin: 30px 0px 0px 320px">
<table style="width:240px; float:left; margin-right:20px;">
</table>
<table style="width:240px; float:left;">
</table>
</div>
get rid of your absolute positioning if you don't really need it and use CSS like
table{
float:left;
margin:0px 5px;
}
You have two choices really.
If you're happy creating your layout with tables, then put both of your tables within another table. i.e.
<table>
<tr>
<td>
<table>{ table 1 stuff }</table>
</td>
<td>
<table>{table 2 stuff }</table>
</td>
</tr>
</table>
Or you can start looking into 'float'ing your elements.
You can create a new table with 1 row and 2 columns and place your first table inside the first column and your second table inside the second column.That way both tables can be displayed side by side
If it were me, I would surround your tables in a div layer, specifying the width and height of the div layer to force the tables next to each other.
For example:
<div id="tablecontainer">
<table id="lefttable"></table>
<table id="righttable"></table>
</div>
And in the CSS:
table
{
margin: 5px;
}
#lefttable
{
float: left;
}
Obviously, this code isn't going to be exactly what OP wants, but you get the idea.
Either use float: left or display: inline-block.
#1:
table {
margin: 10px;
float: left
}
#2:
table {
margin: 10px;
display: inline-block
}
See http://shaquin.tk/experiments/tables2.html and http://shaquin.tk/experiments/tables3.html.
First, fix the syntax and styling. A table element cannot have an h3 child. Either put the h3 inside a cell (which is inside a tr), or turn it to a caption. Don’t set a width of 150%, as this would make the a cell occupy 150% of the width of the available space. The width of an input field set is best set in characters, using the size attribute in HTML.
Then you can float the tables in CSS as suggested in other answers, or by using align=left in table tags. To create horizontal spacing between the tables, you can set e.g. margin-right on the first table.
Note that for usability and accessibility, forms should normally be presented so that there is one input item with its label on one line, so that filling out the form proceeds vertically in a simple manner. So you might be solving the wrong problem.
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
On this page I would like to add a white gap between the background of the "Before" and "After table headings, that aligns with the gap between the photos in each column
I've tried setting the width, max-width and margin-right properties of the "Before" heading and also tried setting the margin-left of the "After" heading, but none of these seem to work.
Thanks,
Don
Easiest way is using colgroup and set a border to act as margin.
<table>
<colgroup />
<colgroup style="border-left:5px solid #fff;" />
See also: http://jsfiddle.net/gwYaQ/
A table is easiest I admit, but it's not really tabular data is it.
You're abusing the table for layout =P
Info about colgroup: http://www.w3schools.com/tags/tag_colgroup.asp
There's a rather dirty way, but does the job:
<tr>
<th>Before</th>
<th style="width: 10px; background: none;"> </th>
<th>After</th>
</tr>
<tr>
<td>IMG1</td>
<td>&nbps;</td>
<td>IMG2</td>
</tr>
I don't think you can achieve that simply changing your CSS.
The white gap between the photo is due to the table cells padding-right (10px), so it's "inside" the cell.
The gradient in the heading being the backgound of the heading cells, a white space between them would have to be "ouside".
On way to fix this would be to add a 10px wide column between the 2 columns. Another is to use colgroup.
But BGerrissen is right : you should not use for that.
th {
padding-left: 50px;
}
td {
padding-left: 50px;
}