I know this was answered before, in this post, but I've been trying to apply that to my code and I don't know what is wrong.
This is what I'm trying to get:
This is what I have:
table {
border-collapse: collapse;
}
.noborders > td {
border: none;
}
<table border="1">
<thead></thead>
<tbody>
<tr>
<td>ye</td>
<td>ye</td>
<td>ye</td>
</tr>
<tr>
<td>ye</td>
<td>ye</td>
<td>ye</td>
</tr>
<tr class="noborders">
<td>no</td>
<td>no</td>
<td>no</td>
</tr>
</tbody>
</table>
this is what I've gotten with that code:
I tried with table{border-bottom:0} in css part, this almost works and I could see what is wrong is the entire table border that can't be removed from the third row when I use border: none on third row td's.
Thank you all for your time.
just change your css for .noborders > td by this
.noborders > td{
border-color: transparent;
border-bottom-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
}
the whole will be like
table{
border-collapse: collapse;
}
.noborders > td{
border-color: transparent;
border-bottom-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
}
<table border="1">
<thead></thead>
<tbody>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
</tbody>
</table>
Don't use border on whole table. You can use border on specific columns.
Try this.
.bor{
border:solid 1px #000;
}
table{
border-collapse: collapse;
}
<html>
<body>
<table>
<tr>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
</tr>
<tr>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
</tr>
<tr>
<td>no</td>
<td>no</td>
<td>no</td>
</tr>
</table>
</body>
</html>
now here is the solution
table{
border-collapse: collapse;
}
/*use this class */
.noborders{
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
<table border="1">
<thead></thead>
<tbody>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
</tbody>
</table>
Related
Html is not my specialty :)
I have an Html table and I want to have a solid line between each row. I've done it by defining a border-bottom on each <td> tag, like so:
<td style="border-bottom: 1px solid #0066ff;">[content]</td>
But it comes out with a one-pixel gap in the line, as seen below:
I tried putting the border-bottom in the <tr> tag, but that didn't work at all. What's the correct way to do this?
You may use the CSS attribute border-collapse and set it to collapse:
table
{
border-collapse: collapse;
}
td
{
border-bottom: solid 1px black;
}
<table>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
Try this.
table {
border-collapse: collapse;
}
td {
padding: 10px 0;
}
tr {
border-bottom: 1px solid #0066ff;
}
Give cellspacing 0 to the table
<table cellspacing="0">
<tr>
<td style="border-bottom: solid 1px;">sdfa</td>
<td style="border-bottom: solid 1px;">asfsaf</td>
</tr>
</table>
Example: JSFiddle
For the following table, the text in the thead element doesn't respond to any CSS rules.
I thought it would inherit the rules from thr table.declensionTable element, but it doesn't.
I created a CSS rule with the table.declensionTable thead selection, but that didn't work either.
What am I doing wrong?
body {
font-family: "Verdana", Sans-serif;
}
table.declensionTable{
font-family: "Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
table.declensionTable thead{
font-family: "Courier New", Serif;
}
table.declensionTable th{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<table class="declensionTable">
<thead><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</thead>
<tbody>
<tr>
<th></th><th>Singular</th><th>Plural </th>
</tr>
<tr>
<td><strong>Nom</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong></td> <td>klubu</td> <td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong></td> <td>klubowi</td> <td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong></td> <td>klubem</td> <td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong></td> <td>klubie</td> <td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong></td> <td>klubie</td> <td>kluby</td>
</tr>
</tbody>
</table>
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
The <thead> element must have one or more <tr> tags inside.
http://www.w3schools.com/tags/tag_thead.asp
Probably because you're confusing the browser with your markup.
The thead tag is expecting table data (tr, td, etc.)
Why not just use a styled header tag above the table?
Fiddle: http://jsfiddle.net/on1ypL4z/
body {
font-family:"Verdana", Sans-serif;
}
table.declensionTable {
font-family:"Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
h3.table-desc {
font-family:"Courier New", Serif;
}
table.declensionTable th {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<h3 class="table-desc"><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</h3>
<table class="declensionTable">
<tbody>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
<tr>
<td><strong>Nom</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong>
</td>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong>
</td>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong>
</td>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong>
</td>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong>
</td>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
Here's an alternative approach to what you are trying to do using a definition list:
<dl>
<dt>klub</dt>
<dd>
<div><em>club</em>; an inanimate masculine noun</div>
<table class="declensionTable">
<thead>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nom</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Gen</th>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<th>Dat</th>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<th>Acc</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Inst</th>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<th>Loc</th>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<th>Voc</th>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
</dd>
</dl>
Fiddle: http://jsfiddle.net/v4h6zkcz/2/
So I appreciate the help.
Regulus and Bitwise Creative were both right, but they didn't take it far enough.
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
It turns out I was just being a complete n00b and I put my th tags inside the body of the table, instead of in the thead header. So while it was right that I needed some tr tags inside thead /thead, the fact was I already had the header properly formatted- just in the wrong place.
I have the following sample table:
<table>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Colspan=5 here</td>
</tr>
</tbody>
</table>
And here is the simple CSS code:
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
border: 1px solid #000;
}
The weird thing is the bottom border after first th disappeared, here is a screenshot:
When I switch to another window and switch back to IE, the table refresh as normal. For the convenient, I create a jsFiddle: http://jsfiddle.net/hulufei/3dxt2/9/
This effect IE10, 9, 8. Is there a fix for this bug in IE?
Change the style code as this seems solve the problem:
table {
border-collapse: collapse;
border-spacing: 0;
border-top:1px solid #000;
border-left:1px solid #000;
}
th, td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
<table>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Colspan=5 here</td>
</tr>
</tbody>
How can I?
Given the html coding below, how can I 1.) Lock the first row (table headers) from scrolling and 2.) Have an inner table border of 1px solid #cccccc
Thanks for all your help!
Jay
Style Coding:
<style type="text/css">
div#data_container {
width: 800px;
height: 75px;
overflow: auto;
border: 1px solid #cccccc;
}
table#data_tbl {
border-collapse: collapse;
table-layout: fixed;
}
table#data_tbl td {
border: 0px;
}
table#data_tbl tr:first-child td {
color: #235A81;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
</style>
Body:
<!-- START OF DATA CONTAINER -->
<div id="data_container">
<table id="data_tbl">
<td>File Number</td>
<td>Date Received</td>
<td>Request Type</td>
<td>Name</td>
<tr>
<td>12345678</td>
<td>08/01/2013</td>
<td>Billing</td>
<td>Joe Smith</td>
</tr>
<tr>
<td>09876543</td>
<td>09/01/2013</td>
<td>Technical</td>
<td>Nancy Edwards</td>
</tr>
<tr>
<td>11223344</td>
<td>10/01/2013</td>
<td>Operations</td>
<td>Jill White</td>
</tr>
<tr>
<td>45678931</td>
<td>12/01/2013</td>
<td>Billing</td>
<td>Michael Burns</td>
</tr>
<tr>
<td>85239975</td>
<td>09/01/2013</td>
<td>Support</td>
<td>Debbie Stewart</td>
</tr>
<tr>
<td>55667788</td>
<td>11/01/2013</td>
<td>Administrative</td>
<td>David Adams</td>
</tr>
</table>
</div>
<!-- END OF DATA CONTAINER -->
Easiest way is to use 3rd party plugin. check this out: http://dlippman.imathas.com/projects/tablescroller.php or try datatables.net
Style table for borders:
table {
position: relative;
}
table, th, td {
border: 1px solid #cccccc;
}
You can set style="overflow:hidden" on th tag when box appears. It will lock mouse scroll or use position:fixed on a box.
I have an HTML table with the class "productsTable". I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You
td.productsTable
{
border: 1px dotted #999999;
}
.productsTable td
{
border: 1px dotted #999999;
}
HTML:
<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
td.productsTable won't work because you have no <td> elements with a productsTable class.
However, your second CSS rule, .productsTable td, this will work because you do have <td> elements that have a parent element with the class productsTable.
I've made a quick fiddle of this, and you can see it working correctly:
td {
border: 1px dotted #999;
}
<table width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td width="20%" align="center">e-phone FREE</td>
<td width="20%" align="center">Personal</td>
<td width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
If this isn't working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting element to see.
I want to give each cell in the table a border.
What I've understand is you want cell border like this:
Here is the fiddle of what you want.
Use following CSS:
table.productsTable {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table.productsTable td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
Hope this helps.
write like this:
.products td
{
border: 1px dotted #999999;
}
HTML
<table class="products">
<tr>
<td></td>
</tr>
</table>
Below code does the following:-
1. gives single border to td's
2. separate border to the table.
Environment:-
Works on FF 34.0.
Untried for html6:-
To run it using html6, try it with html:x eg. html:head, html:title, etc.
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<title>Welcome to the jungle</title>
<style>
.table_main {
border-top-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
border-right-style: ridge;
border-color: red;
border-width: 3px;
}
.table_main td {
background: #A38055;
border-right: solid 1px white ;
border-bottom: 1px solid white;
text-align: center;
}
.table_main th {
background: #DCDCDC;
border-right: solid 1px white ;
border-bottom: 1px solid white;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to the jungle</h1>
<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
<thead> <th>THead1</th> <th>THead2</th> <th>THead3</th>
</thead>
<tbody>
<tr> <td>A</td> <td>B</td> <td>C</td> </tr>
<tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>
<tr> <td>Xena</td> <td>Yoda</td> <td>Zohan</td> </tr>
</tbody>
</table>
</body>
</html>