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;
}
Related
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>
I am using bootstrap 2.3.2 and have a table with 2 headers (only 1 header will be shown at one time). Here's my fiddle
<table class="table table-hover">
<thead>
<tr class="view_1"><th>Header 1</th></tr>
<tr class="view_2"><th>Header 2</th></tr>
</thead>
<tbody>
<tr class="view_1"><td>View 1</td></tr>
<tr class="view_2"><td>View 2</td></tr>
</tbody>
</table>
<button>Click Me</button>
The initial view has .view_1 hidden and .view_2 shown. However, there's a slight top border on the header. This border disappears when you hide .view_2 and show .view_1. How do I hide that top border when .view_2 is shown?
Thanks!
The style that sets that gray border is the .table th, .table td in bootstrap-combined.min.css:192, so you should change the CSS in the fiddle for:
.table th, .table td { border:1px solid #333;}
That'll allow you to change the border's style. Here's your fiddle with the modified CSS.
If you don't want the top border to be shown you need to add:
.table th { border-top: none; }
You can use the below css, to get rid of the top border
CSS:
table thead tr th,table th{border-top:0px;}
Include the bootstrap css first and then include your custom css, then only default bootstrap css will be overridden with your css.
I have table with some rows.
I would like to create a CSS that allow me to change the color for the first TD element in a TR row recursively only for a table which has the class mytable.
Could you give me a sample of CSS?
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
For this you can use :first-child property. Write like this:
.mytable td:first-child{
color:red;
}
Use the CSS "first-child" element: http://www.w3schools.com/cssref/sel_firstchild.asp
So can do something like:
.mytable td:first-child {
something here
}
as #sandeep has written you can use first-child to achieve the goal. Better approach, if possible, is to add a class name to your first td. If this is supposed to be the header, you might also want to use th instead of td
Sandeep has the right idea, but you seem to be asking for a style rule that's slightly more specific. Try this:
table.mytable td:first-child {}
:first-child does not work in IE, a practical approach would be to change these td which you are gonna apply a background to th and then style them
You can try this:
HTML
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
CSS
.mytable tr td:first-child{
color:red;
}
http://jsfiddle.net/hrBAn/1/
I am creating a bunch of tables now as and when I add table header (<th>)table row <tr> and add border to it there are multiple borders coming up. I mean say I have two table headers in a row so each and every th tag will add its own border but I just want want border between the two table header's (th).
<table>
<th>Header1</th>
<th>Header2</th>
<tr><td>Data1</td><td>Data2</td> </tr>
</table>
If you refer the above code and if I add borders to say th tag there will be 2 borders between header1 and header2. I just want 1.
Your problem description is vague (in the future, please come up with an SSCCE, so that everyone can just copy'n'paste'n'run it to see what you exactly mean), but at least, a common solution to this "double border" problem is to add border-collapse: collapse property to the parent table in question:
table {
border-collapse: collapse;
}
Also see this Quirksmode article for several examples.
Set border-collapse:collapse for both table and th in your CSS:
table, th, td { border-collapse:collapse }
If you are guaranteed to have 2 and only 2 th columns, and if I'm reading your question right that you just want a border between the two (i.e. in the middle of the two th tags), then just apply a border-right to the left th:
table
{
border-collapse: collapse;
}
th.leftColumn
{
border-right:1px solid #000;
}
Markup
<table>
<tr>
<th class="leftColumn"> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
It's quick and dirty, but if you know you have only 2 columns it would work. Again this is assuming your question is that you want a border between two th cells, and nowhere else.