I have a simple table. I want a 1px solid black border around every cell. For some reason I am only getting a border outlining the entire table. I tried adding border-collapse: separate; to the table style, which I thought was the default, but that didn't work either.
Am I doing something wrong? How do I border every cell?
What I have now is this:
<table style="font-family:Arial; font-size:12px; border:1px solid black;">
<tr style="outline: thin solid">
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr style="outline: thin solid">
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
You need to apply border to cells (TD) instead of table
TD,TH {
border:1px solid black;
}
<!doctype html>
<html>
<body style="font-family:Arial;">
<table style="font-family:Arial; font-size:12px;">
<tr>
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr>
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
</body>
</html>
In your css try:
th, td { border: 1px solid black; }
Safest way is giving your table a class. This way it won't affect any other tables in your page.
.my-table-border th,
.my-table-border td {
border: 1px solid black
}
<!doctype html>
<html>
<body style="font-family:Arial;">
<table class="my-table-border" style="font-family:Arial; font-size:12px; border:1px solid black;">
<tr style="outline: thin solid">
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr style="outline: thin solid">
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
</body>
</html>
The table class is my-table-border and the selector is only picking tds and ths inside of tables that have this class.
Related
enter image description hereI have a table with mouse hover effect, where last column is merged. Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
<style style="text/css">
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:nth-child(-n+50):hover td:nth-child(-n+2)
{
background-color: #ffff99;
}
</style>
<body style="text-align:center">
<h1 style="color:green;">
Mouse Hover
</h1>
<h2>Requirement is When I hover to Canada, Color only Canada not Gloria Jean's Coffees and Coffee</h2>
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td>Gloria Jean's Coffees</td>
<td>Coffee</td>
<td rowspan="3" class="highlight" data-cell="c5">Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
</tr>
</table>
</body>
</html>
`
When I hover a particular row, hover effect works properly. But when I hover to the last merged column, hover effect work for 1st row also.
I want that, when I hover to the last merged column, hover effect only work on that particular merged column, not 1st row.
as per comment, here i use small jquery code also,
use hover function of jquery and other row use css hover with css :not property.
try like below,
$(document).ready(function(){
$('.nothighlight').hover(
function () {
$('.nothighlight').css('background','#ffff99');
},
function () {
$('.nothighlight').css('background','#ffffff');
}
);
});
table,th,td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:hover td:not(:last-child):not(.nothighlight)
{
background-color: #ffff99;
}
.highlight:hover
{
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="text-align:center">
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td class="nothighlight">Gloria Jean's Coffees</td>
<td class="nothighlight">Coffee</td>
<td rowspan="3" class="highlight" >Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
<td style="display: none;"></td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
<td style="display: none;"></td>
</tr>
</table>
</body>
I am trying to separate my tablet but I cannot add the dividing line, if I put style = "border: 1px solid black in tr it appears to me but not in the way I want.
The code is the following:
<template id="diario_report">
tr.border_bottom td {
border-bottom:1px solid black;
}
</style>
<table style="border:1px solid black;border-collapse:collapse;width:100%" cellspacing="0">
<tbody style="border: 1px solid black">
<tr>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Fecha</strong></td>
<td colspan="2" style="border:1px solid black;width:20%;text-align:center"><strong>Cuentas</strong></td>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Debe</strong></td>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Haber</strong></td>
</tr>
<t t-foreach="docs" t-as="val">
<tr>
<td style="text-align:center"><t t-esc="val.get('fecha')"/></td>
<td style="text-align:center"><t t-esc="val.get('titulo')"/></td>
<td></td>
<td style="text-align:center"><t t-esc="val.get('total_debe')"/></td>
<td></td>
</tr>
<tr>
<td></td><td></td>
<td style="text-align:center"><t t-esc="val.get('cuenta_haber')"/></td>
<td></td>
<td style="text-align:center"><t t-esc="val.get('total_haber')"/></td>
</tr>
</t>
</tbody>
I want it to be like this
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
CSS:
tr.border_bottom td {
border-bottom:1pt solid black;
}
Also add cellspacing="0" as an attribute to <table>.
and give it style.
I have a little problem with the colspan and rowspan. I'm trying to make the following table:
I have tried to create it, but I have difficulties on the first row, second td when I put it colspan="2" and to get the third td and put it as rowspan="2". Is this table even possible to be created?
colspan means we just binding columns. whereas rowspan means we are binding rows.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border: 1px solid black; width: 300px;">
<table style="color: grey;">
<tr>
<td style="border: 1px solid black; background-color: blue;">test</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td width="100px;">test</td>
<td width="100px;" style="border: 1px solid black; background-color: blue;">test</td>
<td width="100px;">test</td>
</tr>
<tr>
<td colspan="2">colspan 2</td>
<td style="border: 1px solid black; background-color: blue;">test</td>
</tr>
</table>
</div>
</body>
</html>
Hope this may help you.
I need to make a div with a solid border. I have a good start but having some trouble getting the alignment right and getting the lines working. Below is an image of the requested HTML
So far I think I'm some what close with my HTML but my two top lines do not match and I cant get the vertical line in.
code:
<div style="width:60%;border:solid">
<div style="width:45%; display: inline-block;">
<div style="margin-left:5px;">
Domestic Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$25..01 to $50.00..add $7.95 <br>
$50.01 to $75.00...add $11.95 <br>
$75.01 to $100.00...add $13.95 <br>
$100.01 to $150.00...add $17.95 <br>
$150.01 to $200.00 .. add $19.95 <br>
200.01 – above.. add $23.95
</div>
</div>
<div style="width: 8%; display: inline-block;"><hr style="width: 1px; height: 100px;"></div>
<div style="width:45%; display: inline-block;">
Canada, AK, HI, PR Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$.01-$25.00.. add $14.95<br>
$25.01 - $50.00.add $15.95<br>
$50.01 to $75.00...add $18..95<br>
$75.01 to $100.00...add $20.95<br>
$100.01 to $150.00..add $25.95<br>
$150.01 to $200.00..add $28.95<br>
$200.01 to above....add $32.95
</div>
</div>
Here is what my HTML looks like on the web page currently:
I'm currently missing the vertical line, top headers are not aligning and bottom texts are not aligning. Originally this was using a table which is fine but now we want it to be responsive and to use div's. I also can not use css. I would prefer to use css personally but that request was denied.
You should probably build this using html tables. See here for further help.
<style>
table,
th {
border: 1px solid black;
border-collapse: collapse;
}
td {
border-right: 1px solid black;
}
</style>
<table>
<tr>
<th>Domestic Shipping and Handling</th>
<th>Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td> $25..01 to $50.00..add $7.95 </td>
<td> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td>$50.01 to $75.00...add $11.95</td>
<td>$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td>$75.01 to $100.00...add $13.95</td>
<td>$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td>$100.01 to $150.00...add $17.95</td>
<td>$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td>$150.01 to $200.00 .. add $19.95</td>
<td>$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td>200.01 – above.. add $23.95</td>
<td>$150.01 to $200.00..add $28.95</td>
</tr>
</table>
Thank you so much for your post. I used your code and adjusted it a little to get my answer but your code is better then mine. Here is my code after adjustments:
<table style="border: 1px solid black;">
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Domestic Shipping and Handling</th>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;"> $25..01 to $50.00..add $7.95 </td>
<td style="padding:5px;"> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$50.01 to $75.00...add $11.95</td>
<td style="padding:5px;">$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$75.01 to $100.00...add $13.95</td>
<td style="padding:5px;">$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$100.01 to $150.00...add $17.95</td>
<td style="padding:5px;">$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$150.01 to $200.00 .. add $19.95</td>
<td style="padding:5px;">$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">200.01 – above.. add $23.95</td>
<td style="padding:5px;">$150.01 to $200.00..add $28.95</td>
</tr>
</table style="border: 1px solid black;">
Hope it helps someone else. I added padding as well to this because the other version was really close together and hard to read.
I've the below HTML Table. and her i want to get only first row border and the rest only column borders only. as given in the screenshot. please let me know how i can do it in my css.
<table cellspacing="1" class="topbotcol">
<thead>
<tr>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Item</span>
</th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Qty</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Unit</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Rate $</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">BUILT-UP WATERPROOF MEMBRANE PANEL ROOFING TO FLAT ROOFS AND POOL DECK</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Preparing surfaces: priming and applying “Grims K1” slurry and “Grims Premier K10” waterproof membrane system as specified</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Membrane collars; pointing with epoxy; reinforced with clamp rings around flanges of rainwater outlets</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left">
<div class="para">A</div>
</td>
<td class="rowsep" align="center">
<div class="para">200mm diameter</div>
</td>
<td class="rowsep" align="center">
<div class="para">13</div>
</td>
<td class="rowsep" align="center">
<div class="para">No.</div>
</td>
<td class="rowsep" align="center">
<div class="para">34.28</div>
</td>
<td class="rowsep" align="center">
<div class="para">445.64</div>
</td>
</tr>
</tbody>
</table>
Thanks
table {
border-top: 1px Solid Black;
border-left: 1px Solid Black;
border-bottom: 1px Solid Black;
border-spacing: 0;
}
th, td {
border-right: 1px Solid Black;
}
th {
background-color: lightgrey;
border-bottom: 1px Solid Black;
}
You can use pseudo classes here:
As your table has th for table headers then you can try this:
table.topbotcol tr:first-of-type{
border-bottom:1px solid #ccc; // Will apply border to first row
}
table.topbotcol tr:first-of-type td{
border:none; // will not apply border to tds of first row, and continue after first row
}
You haven't provided detailed description, i think this might help you!
Pseudo-Classes
Docs
:first-of-type
What you need to do is set a border and set the table border to collapse. This will merge the cell borders. Then remove the unwanted top and bottom borders.
table, th, td{
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
td {
border-bottom: none;
border-top: none;
}
Here's a JSFiddle with a fuller example as well as some more optimizations.
Link to JS Fiddle
Suggestions:
don't use valign or align on table cells, use CSS vertical-align and text-align instead
use paragraph tags instead of <div class="para">
use class names that are descriptive of the content, not its style. This helps with maintenance later when you decide that you do not want something to be font-style-bold anymore. It is easier to change <th> in the CSS than it is to change it in the CSS and THEN go back and change ALL font-style-bold to font-style-normal in your HTML.
You can achieve that by setting the border on the td and th cells, but making the border-top and border-bottom none for the td, but then setting surrounding border of the entire table as well.
The following css is an example:
table {
border-collapse:collapse;
border: 1px solid #000;
}
th {
background-color: #ccc;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
td {
border-left: 1px solid #000;
padding: 5px;
}
Link to JS Fiddle
Try this
http://jsfiddle.net/aYCjA/
.tbl {
border: 1px solid black;
border-collapse: collapse;
min-width: 300px;
text-align: center;
}
.tbl th, .tbl td {
padding: 2px 5px;
}
.tbl td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.tbl th {
border: 1px solid black;
}
The important thing here is border-collapse: collapse. This attribute prevents showing duplicate borders in sibling cells.