I am trying to achieve this table look
How can I make the first heading to fill the entire width? Something like flex: 1 would do. Also, how can I add border to only elements in the table like on the picture, instead of entire table?
.center {
text-align: center;
}
table {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
I need this to look like
Image
You can do like below:
.center {
text-align: center;
}
td,
th {
padding: 3px 5px; /* control the spacing */
}
table {
border-collapse: collapse; /* this is mandatory to correctly use border */
border-bottom: 1px solid black; /* only border bottom here */
}
th:first-child {
width: 100%; /* take as much space as possible */
}
tr:nth-child(2) {
border-top: 1px solid black; /* border top to second tr */
}
tr:not(:first-child) {
/* right and left to all except the first one */
border-left: 1px solid black;
border-right: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
For styling the first raw(table header) there are many solutions fastest one by selecting table first raw
table tr:first-child{
border: 1px solid black;
}
I recommend you to read this article first: A Complete Guide to the Table Element
Related
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>
Its my first time using <table> so im don't know how to add padding inside of table for th and make it have connected padding on top and bottom
HTML
<div class="order-list">
<h3 class="order-tittle">Ваш Заказ</h3>
<table class="table">
<thead class="list-head">
<tr>
<th class="article">Артикул</th>
<th class="name">Наименование</th>
<th class="unit">Единица</th>
<th class="amount">Кол-во</th>
<th class="price">Стоимость (300руб.)</th>
<th class="delete">Удалить</th>
</tr>
</thead>
<tbody>
<tr>
<td>00000001973</td>
<td>Масло фреоновое B5.2 ( 1 л)</td>
<td>банка</td>
<td><input type="text" value="10" class="td-input"></td>
<td class="number-desc">135,00</td>
<td class="td-button"><button type="button" class="td-button-icon"></button></td>
</tr>
</tbody>
</table>
</div>
CSS
.table td{
border: 1px dotted black;
border-collapse: collapse;
border-spacing: 0;
}
.td{
padding: 5px 0;
}
Since you specified that you want padding and border bottom and top for th
adding the below css snippet to your style.css should do the trick
th {
border-top: 5px solid black;
border-bottom: 5px solid black;
padding: 10px;
}
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>
How can I add a white space around the background color of a table cell in CSS? I have this, but the background color goes all the way to the edge. Padding seems to work for the content, but not the background color.
#main-monitor {
width: 100%;
}
#main-monitor td, #main-monitor th {
border: 3px solid #999;
padding: 4px;
}
EDIT: Here's my full CSS that matters to these pieces. I've made a couple updates, but am still having the same issue.
#main-monitor {
width: 100%;
}
#main-monitor th {
border: 3px solid #999;
padding: 3px;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}
#main-monitor td {
background-color: white;
border: 3px solid #999;
margin: 2px;
}
#main-monitor td span {
margin: 5px;
}
It's being applied to a table in this partial view:
<table id="main-monitor">
<thead>
<tr>
<th>
#Html.DisplayNameFor(m => m.Name)
</th>
<th>
#Html.DisplayNameFor(m => m.A)
</th>
<th>
#Html.DisplayNameFor(m => m.B)
</th>
<th>
#Html.DisplayNameFor(m => m.C)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Name</td>
<td style="background-color:#item.AColor"><span>#item.A</span></td>
<td style="background-color:#item.BColor"><span>#item.B</span></td>
<td style="background-color:#item.CColor">#item.C</td>
</tr>
}
</tbody>
</table>
Solution 1
As mentioned by "Advait S", You can use the border-spacing css rule for table tags
Here is a practical example
td {
background: red;
}
table {
border-spacing: 10px;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
Solution 2
Despite solution 1 is elegant. you can change the display property to your table cell to inline-block and then apply a margin to your cells
snippet below
td{
background:red;
margin:10px;
display:inline-block;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
You can also try this.
Write the text of table in span and apply style as.
HTML
<table>
<tr>
<td><span>Hello</span></td>
</tr>
</table>
CSS
td{
border: 1px Solid Black;
background-color: white;
}
td span{
background-color: blue;
margin: 5px;
}
See this
If you look at all of my <th> tags in the <thead> tag in the table, you can see if each has its own class: col1, col2, col3, col4... col9 I also have a <thead> in the table.
Now everything in the css is fine for the table except for my table headings. The problem is that I have a scrolling table, because I have a scrolling table I don't want my table headings to scroll with the table. Because of that I need this #tableWrapper thead tr, the problem though with this is the width of the thead and the width of the table headings (th), they are not going as wide as the whole table (99%), it is going approximately about 60% of the way, now if I didn't have a thead I will be able to get the table headings to its correct size and go as wide as the table, but this means the table headings will scroll with the table so I need the thead. But the problem is that the <thead> and <th> is not going as wide as table, why is this.
Below is table code:
<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col1">Question No</th>
<th class="col2">Question</th>
<th class="col3">Option Type</th>
<th class="col4">Duration</th>
<th class="col5">Weight(%)</th>
<th class="col6">Answer</th>
<th class="col7">Video</th>
<th class="col8">Audio</th>
<th class="col9">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
<td class="options"></td>
<td class="duration"></td>
<td class="weight"></td>
<td class="answer"></td>
<td class="video"></td>
<td class="audio"></td>
<td class="image"></td>
</tr>
</tbody>
Below is css;
/*css for QandATable.php*/
#qandatbl{ //table
font-size:14px;
border-collapse:collapse;
text-align:center;
margin-left:auto;
margin-right:auto;
width:99%;
}
.col1{
background-color:#FEFEF2;
width:7%;
border: 1px solid black;
}
.col2{
background-color:#FCF6CF;
width:16%;
border: 1px solid black;
}
.col3{
background-color:#FEFEF2;
width:7%;
border: 1px solid black;
}
.col4{
background-color:#FCF6CF;
width:7%;
border: 1px solid black;
}
.col5{
background-color:#FEFEF2;
width:7%;
border: 1px solid black;
}
.col6{
background-color:#FCF6CF;
width:7%;
border: 1px solid black;
}
.col7{
background-color:#FEFEF2;
width:16%;
border: 1px solid black;
}
.col8{
background-color:#FCF6CF;
width:16%;
border: 1px solid black;
}
.col9{
background-color:#FCF6CF;
width:16%;
border: 1px solid black;
}
#tableWrapper {
position:relative;
}
#tableScroll {
height:300px;
overflow:auto;
margin-top:20px;
}
#tableWrapper thead {
position:absolute;
top:-24px;
width:99%;
}`enter code here`
This seems to work in IE 6+ and Firefox. Please let me know what others do or do not work:
http://spruce.flint.umich.edu/~jalarie/jaa_kee.htm
From what I have seen you can't do this with just CSS.
HTML table with fixed headers?
HTML table with fixed headers and a fixed column?
There are a few solutions in those links above, but they all fall apart at some part (IE7, Safari and IE9 being the major culprits. If you really want this I would think about using javascript. There area number of jQuery plugins that can accomplish this.