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>
Related
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>
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
Pictures are worth much more than words, in this case. See how the intersection of the top, black bar and the lightgrey, vertical bar between 'Left' and 'Right' is lightgrey instead of black? Is there a way to ensure that one border is shown 'above' another, kind of like a z-index?
How it looks:
How I want it to look (adjusted with image editor):
Here's a jsfiddle for my issue. If you don't like jsfiddle, for whatever reason, my HTML and CSS are below.
HTML:
<table id="tiresTable" class="table">
<tr class="firstRow">
<td class="thSim">Tires:</td>
<td class="thXAxis borderRight">Left</td>
<td class="thXAxis">Right</td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Front</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Rear</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr>
<td class="thYAxis">Spare</td>
<td colspan="2"></td>
</tr>
</table>
CSS:
#tiresTable{
border-collapse: collapse;
}
#tiresTable tr.firstRow td{
border-bottom: 1px solid black;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
border-right: 1px solid black;
}
#tiresTable td.borderRight{
border-right: 1px solid lightgrey;
}
#tiresTable tr.borderBottom{
border-bottom: 1px solid lightgrey;
}
Please note that, due to technological constraints, I cannot use CSS3 properties. Also note that I will not be offended if you edit my question title if you can describe the issue more eloquently than I have.
EDIT:
It was a little hacky but I was able to do something that works as you need.
HTML:
<table id="tiresTable" class="table">
<tr class="firstRow">
<td class="thSim">Tires:</td>
<td class="thXAxis borderRight">Left</td>
<td class="thXAxis">Right</td>
</tr>
<tr class="border-bottom">
<td colspan="3"><div class="black"></div></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Front</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Rear</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr>
<td class="thYAxis">Spare</td>
<td colspan="2"></td>
</tr>
</table>
CSS:
#tiresTable{
border-collapse: collapse;
}
#tiresTable tr.borderBottom{
border-bottom: 1px solid lightgrey;
}
#tiresTable td.borderRight{
border-right: 1px solid lightgrey;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
border-right: 1px solid black;
}
.border-bottom {
height: 1px;
}
.border-bottom td {
height: 1px;
border: 0px;
padding: 0px;
}
.black {
background-color: black;
height: 1px;
}
I removed anything that is not really required, and used altered classes names to know easily what is new and what is not.
Fiddle: http://jsfiddle.net/ru92py4m/15/
<table border="1" style="background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;">
<tr style="background-color:orange;color:white;">
<th style="padding:3px;">Table header</th><th style="padding:3px;">Table header</th>
</tr>
<tr>
<td style="padding:3px;">Table cell 1</td><td style="padding:3px;">Table cell 2</td>
</tr>
<tr>
<td style="padding:3px;">Table cell 3</td><td style="padding:3px;">Table cell 4</td>
</tr>
</table>
My question is how do i convert the inline CSS in this html example into an external style sheet?
would the css look like this?
tr {background-color:orange;color:white;}
table {background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;}
td, th {padding:3px;}
Use table tr:first-child instead of tr as only the first row has inline styles:
table {
background-color: yellow;
border: 1px dotted black;
border-collapse: collapse;
width: 80%;
}
table th, table td {
padding: 3px;
}
table tr:first-child {
background-color: orange;
color: white;
}
http://jsfiddle.net/URBMh/2/
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.