How to make a line in a table with CSS - css

I'd tried to make a line as an image below which runs through the table but it didn't work.
I would like to
make a line like the image.
set a bullet for each <td> in the 2nd table
HTML:
<table>
<tr>
<table class="a">
<tr>
<td style="width: 300px">Shuttle Bus Schedule | Make an appointment</td>
<td style="width: 220px">My Request</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="width: 300px">Need Approval by Manager</td>
<td style="width: 220px">Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
</tr>
</table>
CSS:
.a {
border-bottom: 1px solid #c4c4c4;
}

Structure your table properly with table headings (<th>) instead of nested tables:
<table>
<tr>
<th style="width: 300px">Shuttle Bus Schedule | Make an appointment</th>
<th style="width: 220px">My Request</th>
</tr>
<tr>
<td>Need Approval by Manager</td>
<td>Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
CSS:
th {border-bottom:1px solid #c4c4c4};
td:before {content:"\2022";}
You can see this here on jsfiddle.

The table structure is not really in good format. However to keep the same table structure you can achieve the results. See the DEMO.
Here is the CSS need to used.
.a {
border-top: 1px solid transparent;
}
table{border: 1px solid transparent;
border-collapse:collapse;}
table td{ padding:5px; margin:5px;}
table+table td:last-child{border-left:
1px solid #c4c4c4;}
table+table td:last-child:before{content:"\2022"}
table+table{border-top: 1px solid #c4c4c4; }
table.a td:last-child:before{content:" "}

Related

duplicate table borders with css

Is there a way to make the second table borders look the same as the first table?
table {
border: 1px solid black;
}
.top {
border-top: 1px solid black;
}
.bottom {
border-bottom: 1px solid black;
}
.right {
border-right: 1px solid black;
}
.left {
border-left: 1px solid black;
}
#fin td,
#fin tr {
padding: 0;
}
#fin tr{
border: 1px solid black;
}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr class='top'><!--
--><td class='top left'>HTML</td><!--
--><td class = 'top right'>★★★★★</td><!--
--><td class='top left'>Javascript</td><!--
--><td class='top right'>★</td><!--
--></tr><!--
--><tr class='bottom'><!--
--><td class='bottom left'>CSS</td><!--
--><td class = 'bottom right'>★★</td><!--
--><td class='bottom left'>Node</td><!--
--><td class='bottom right'>★</td><!--
--></tr>
</table>
<hr>
My Hobbies
Contact Me
I would play with pseudo element
table {
border: 1px solid black;
}
td[class] {
position: relative;
padding: 4px;
}
td[class]::before,
td[class]::after{
content:"";
position: absolute;
inset: var(--t,0) var(--r,0) var(--b,0) var(--l,0);
pointer-events: none;
border: solid black;
border-width: var(--w,0);
}
td[class]::after {
inset: var(--t,2px) var(--r,2px) var(--b,2px) var(--l,2px);
}
.top-left {--w: 1px 0 0 1px;--b:-4px;--r:-4px;}
.top-right {--w: 1px 1px 0 0;--b:-4px;--l:-4px;}
.bottom-left {--w: 0 0 1px 1px;--t:-4px;--r:-4px;}
.bottom-right {--w: 0 1px 1px 0;--t:-4px;--l:-4px;}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr>
<td class='top-left'>HTML</td>
<td class='top-right'>★★★★★</td>
<td class='top-left'>Javascript</td>
<td class='top-right'>★</td>
</tr>
<tr>
<td class='bottom-left'>CSS</td>
<td class='bottom-right'>★★</td>
<td class='bottom-left'>Node</td>
<td class='bottom-right'>★</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
I made some changes to your code, and now they look the same. However, please be aware that I removed the "fin" id from the second table. So I suggest you choose a new ID for that one and start from there.
(I did not touch any of the CSS, essentially I just copied the first table over so they both look the same)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table border="1">
<tr>
<td>
<table >
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
</body>
</html>
If you match the structure of your second table to your first it should work. I have added a css class so as to not repeat the border style.
<style>
#borderForTable{
border:1px solid black
}
#borderForTD{
border:2px double black
}
</style>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me

How I can fixed the text in elementor pro wordpress to left

How I can change this : (photo)
To this: (photo)
(!) Dosen't work with: text-align, text-justify, etc.
I believe that the best way to achieve that by creating a custom html table
table{
border: 1px solid #ddd;
}
.second{
width: 35%;
border-left:1px solid #ddd;
}
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>Item 1</td>
<td class="second">44$</td>
</tr>
<tr>
<td>Item 2</td>
<td class="second">$55</td>
</tr>
<tr>
<td >Item 3</td>
<td class="second">$66</td>
</tr>
<tr>
<td>Item 4</td>
<td class="second">$88</td>
</tr>
<tr>
<td>Item 5</td>
<td class="second">$99</td>
</tr>
</tbody>
</table>
<!-- DivTable.com -->

How to structure bootrap tables in this way?

I'm looking to structure the tables in this way:
I tried doing that but I don't know how to put two columns inside a row (inch, cm)
It's a clothing store of a friend so I'd appreciate any help in this.
Did you try to do like this?
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align:center;
}
.title{
background-color:red;
}
.sub-title{
background-color:lightgreen;
}
.footer{
background-color:lightcoral;
}
<table>
<thead>
<tr class="title">
<th colspan="7">Size Table</th>
</tr>
<tr class="sub-title">
<th rowspan="2"></th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
</tr>
<tr class="sub-title">
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>M</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>L</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
</tbody>
<tfoot>
<tr class="footer">
<th colspan="7">description</th>
</tr>
</tfoot>
</table>
this code will help you. check the below jsfiddle link
https://jsfiddle.net/Gurmatpal/aq9Laaew/221894/
Check This Code. I think this will help you
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2"> </th>
<th colspan="2"> </th>
</tr>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

border overlapping with empty thead and border-collapse in safari and chrome

In chrome and safari browsers, the border of a td overlaps the previous element when there's an empty thead and border-collapse: collapse;
<div>Hello</div>
<table style="border-collapse: collapse;">
<thead></thead>
<tbody>
<tr>
<td style="border-top: 25px solid black">World</td>
</tr>
</tbody>
</table>
In chrome or safari the Text "Hello", shown in the div before the table, is not readable because of the overlapping border from the td. But it's shown well in firefox.
In Safari an Chrome the border is not overlapping the text in the following cases:
without an empty thead
without the border-collapse
with a th in the thead
<div>Hello</div>
<table>
<thead></thead>
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>
<div>Hello</div>
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>
<div>Hello</div>
<table style="border-collapse: collapse;">
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>
Seems to be wrong in chrome or safari or does anyone knows if there is a reason for the different behaviors?
This does look like a flaw in Chrome's display engine, yes.
There is, however, a simple workaround: just add thead:empty {display:none} to the stylesheet.
thead:empty {display:none}
<div>Hello</div>
<table style="border-collapse: collapse;">
<thead></thead>
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>
<div>Hello</div>
<table>
<thead></thead>
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>
<div>Hello</div>
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>
<div>Hello</div>
<table style="border-collapse: collapse;">
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-top: 15px solid black">World</td>
</tr>
</tbody>
</table>

Aligning html tables to get vertical line same for both

Hello I have these following tables for which I want same vertical line. please check my code here link I have two vertical tables, I want same vertical line of alignment for both the tables so that The line between two tables appears same though the tables are different.
Here is what I want
Here is what I am getting if I add text to th .
please tell me how can I make it better.
table,
th,
td {
border: 1px solid black;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td>$100</td>
</tr>
<tr>
<th>February</th>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td>$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td>$80</td>
</tr>
</table>
You could simply specify the width for the th and td elements, say 50%.
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
table th {
text-align: left;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
what I did is put the two tables in another table which has 2 rows to perfectly match vertical alignment
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
<table>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
</table>
I assume this is what you expect!

Resources