Is there a way to target the bottom tds of just the first and second rows?
I have tried just using tr > td{border-bottom:black solid 1px;} but it goes through all tds.
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Heres what I have so far for css
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
Sure you can use this:
tr:nth-of-type(-n + 2) > td:nth-of-type(-n +2){
border-bottom:1px solid black;
}
working example:
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
tr:nth-of-type(-n + 2) > td:nth-of-type(-n +2){
border-bottom:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Yes, with :nth-of-type you can do for example this:
selecting nothing but the first 2 tr and nothing but the first 2 td inside
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
table tr:nth-of-type(-n+2) td:nth-of-type(-n+2){
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
For a traditional grid of nine squares, you can use table tr:not(:last-child) td to target all cells in all rows except the last one:
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
table tr:not(:last-child) td {
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Changing that to table tr:not(:last-child) td:not(:last-child) will target the first two squares in each row, leaving the third column bare.
Related
I'm just trying to get some help making the table in vertical alignment. My problem is that it shifted the td text to the left.
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table,td, th{
border: 1px solid black;
border: double;
}
td{
display: table-row;
vertical-align: middle;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
This is what it should look like but it doesn't
This is what it actually looks like
This is what it looks like but it needs the colors to fill the table and the text to be the center
Try this!
Hope it helps :)
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table, th {
border: 1px solid black;
border: double;
}
td {
display: block;
text-align: center;
border: 2px solid gray;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
If you need each color on its own table row then your missing some code
for each row you need:
<tr> <!-- Start of row -->
<td>Color 1</td>
</tr> <!-- End of row -->
so your table code should look like:
<table>
<tr> <!-- 1st row -->
<td>Color 1</td>
</tr> <!-- End of 1st row -->
<tr> <!-- 2nd row -->
<td>Color 2</td>
</tr> <!-- End of 2nd row -->
<tr> <!-- 3rd row -->
<td>Color 3</td>
</tr> <!-- End of 3rd row -->
</table>
html table border rendering problem on chrome. I hava code like:
table {
border-collapse: collapse;
}
#first td {
width: 200px;
height: 80px;
border-style: dashed;
}
#second td {
width: 200px;
height: 80px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="first">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
<br/>
<table id="second">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
</body>
</html>
On first table, the left border of c2 is looks like a solid line, while I set to td {border-style: dashed;}. I'm troubled.
On second table, why the left border of c2,c3 are darker then c1's on Chrome?
And how to fix them? All the test works fine in Firefox.
You can use solid color instead of used rgba color
td {
border-style: solid;
border-color:#ddd;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #ddd;
/* border-collapse: collapse; */
border-collapse: collapse;
}
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
it because of you give opacity to border color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border-style: solid;
border-color: #a3a3a3;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #a3a3a3;
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>
Insted of using rgba -- border-color: rgba(0, 0, 0, 0.2); ====== use #c1c1c1 code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border: dashed 1px #c1c1c1;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>
I intend to add some lines into an HTML table that marks grouping rows. See below picture.
Is it possible to draw those blue lines in the table? Thanks.
http://jsbin.com/kogijixici/1/edit?html,output
<table><tr></tr></table>
Use the following css, and you will get your result:
td[rowspan] {
position: relative;
}
td[rowspan]:before {
content: '';
height: 80%;
width: 20%;
border: 2px solid blue;
border-right: none;
position: absolute;
top: 10%;
right: 10px;
}
Here is the link to jsbin: http://jsbin.com/juzasemeje/edit?html,css,output
You can customise the values a little to match your requirements.
Try this
.td-line {
position: relative;
}
.td-line:before {
content: '';
display: block;
width: 20px;
height: 73%;
position: absolute;
right: 10px;
top: 13%;
border-top: solid 1px blue;
border-bottom: solid 1px blue;
border-left: solid 1px blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<th width="150" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
</tr>
<tr>
<td rowspan="3" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>
is this output ru expecting
check output in Jsbin.com
.border{
border-top:2px solid blue;
border-left:2px solid blue;
border-bottom:2px solid blue;
height:50px;
width:20px;
position:relative;
left:100px;
bottom:10px
}
update ur css as above
How would I achieve this table layout?
Here's a sample:
<!doctype html>
<html>
<head>
<title>Rows Demo </title>
<style>
table {
border: 1px solid black;
}
td {
border:1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
</table>
</body>
</html>
How can the code below be modified such that the Table THead matches up with the TD's and also respect the size (width) of the table? What is happening now is that the table headers expand beyond the size of the div and the table horizontally accross the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
table-layout: fixed;
}
table th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
text-align: left;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
height: 20px;
width: 200px;
}
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position: fixed;
_position: relative;
_position: absolute;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
_position:relative;
_position: absolute;
_position: fixed;
}
table tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>File Number</th>
<th> </th>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
<script>
$(function() {
$( "#data tr th" ).resizable({
handles: 'e'
});
});
</script>
</div>
</body>
</html>
ETA http://jsfiddle.net/KrB79/
Fix the container's CSS Coding to:
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
}
Problem solved with IE7.