Problems with tables borders - html

I have wierd problem with my table,
As normal I want borders around my Table Heads and Table Cells,
But for some reason it only gives me a border around the whole table.
How can I fix this?
Images and code attached
How it looks
HTML;
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
CSS;
table, th, td {
background-color: white;
border: solid black 3px;
}

The code you posted in your your question does put borders not only around the whole table, but also around every td and th.
I suppose you might not want the cells to have seperate borders. In this case you should apply the borders only to td and th (i.e. the cells) and in addition apply border-collapse: collapse; to the table itself:
table {
border-collapse: collapse;
}
th,
td {
background-color: white;
border: solid black 3px;
}
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>

The best way to approach this is to be careful with which CSS selectors you are using, and not use the table selector as a whole. For help with simple table values and alternatives, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content.
thead { background-color: white; border: solid black 3px; }
th{ background-color: white; border: solid black 3px; }
td{ background-color: white; border: solid black 3px; }

#remi03
can you try these codes
original:
bu kodları bir denermisiniz.
.baslik th{
border: solid maroon 2px;
padding: 0;
}
.icerik td{
border: solid dodgerblue 2px;
padding: 0;
}
<table width='100%'>
<tr class="baslik">
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr class="icerik">
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>

Related

Thead Background Image Overlay

I have an html Document with CSS and try the following:
I want to have an Background-Image in <Thead>. This Image should be in the Background of the other td´s. Maybe an overlay?
I want to get the following solution (Note: The Image must be in the thead. The other Td must be without an Background-Image)
Why should I need it?
We are using an online-built-in-software that converts html outputs in pdf. And the thead is the only markup that repeats on every page. Other solutions for repeating a header doesn't work.
A Background-Image at TBody doesn't work for me, because it doesn't repeat when the pagebrake come.
Edit: Update with codes and clearify my question
So Here is a simple code where I start (Thanks to #NickVU)
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: yellow
}
thead {
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
So at the End, i want to get the following output. (Like the img. above)
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: yellow
}
table {
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
background-repeat: no-repeat;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
Note: But the img must be linked at the thead
UPDATED
According your requirement update, now I briefly understood your case.
That's impossible to have background-image with overflow, BUT we can do it with pseudoelement ::before on thead. Here is an example
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: white;
position: relative;
}
thead::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
background-repeat: no-repeat;
}
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
OLD ANSWER
I think you just simply put it in your CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
thead, tbody {
background-image: url("https://www.w3schools.com/cssref/paper.gif");
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
P/s: I'm using W3 school image for the demo. You can replace it with your own image.

How to create a full width HTML table with borders?

Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>

IE table cell border bug with colspan set

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>

Set same width two tables

I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.

Making a Scrollable table and insert inner table border

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.