The middle border in this table isn't displaying correctly. There should be a continuous line but it is cut in the header.
I'm not sure why this happens and would like to learn how to do this in the correct way.
Thanks.
in your table add border-spacing: 0; I think it will solve your problem.
you can also solve this problem using cellspacing="0"
Add cellspacing="0" to the table.
<table style="width:100%; text-align:center;" cellspacing="0">
<tr>
<th><h4>Quick Links</h4></th>
<th style="border-left: 2px solid black;"><h4>Pinned Versions</h4></th>
</tr>
...
https://plnkr.co/edit/03rKEE3pilBpF0gS?preview
Try applying border spacing to the style
<div style="width: 700px; box-shadow: 5px 5px 5px; outline-style: solid; color: black; background-color:#def8de; padding: 10px; border-radius: 15px; display: inline-block; font-family: Calibri">
<h1 style="text-align: center; text-style: bold">OC Group X Pipeline</h1>
<h3 style="color:darkgreen; text-align: center">Catalog Version: 21.12.22</h3>
<ul style="list-style-type:square;">
</ul>
<div style="color:black;border:1px solid black;"></div>
<table style="width:100%; text-align:center;border-spacing:0">
<tr>
<th><h4>Quick Links</h4></th>
<th style="border-left: 2px solid black;"><h4>Pinned Versions</h4></th>
</tr>
<tr>
<td style="text-align:left;">
<ul style="list-style-type:square; ">
<li><h4><a id="NS" style="color:blue;" href="X">OCP</a></h4></li>
<li><h4><a id="VB" style="color:blue;" href="X"</a></h4></li>
<li><h4><a id="BB" style="color:blue;" href="X">Bitbucket</a></h4></li>
<li><h4><a id="CB" style="color:blue;" href="X">Couchbase</a></h4></li>
</ul>
</td>
<!-- Pinned Versions -->
<td style="border-left: 2px solid black;">
<table style="width:85%; text-align:left; margin-left:15px; line-height: 1.15; ">
<tr>
<th style="width:250px">Domain Desc.</th>
<th style="width:20px">Version</th>
</tr>
<!--Pinned-Versions-START--><tr id="PinnedDD"><td>shoppingcart-shoppingcart</td><td>1.54.12</td></tr><!--Pinned-Versions-END-->
<tr><td></td><td></td></tr>
<tr>
<th style="width:250px">Testing Pack.</th>
<th style="width:20px">Version</th>
</tr>
<!--Pinned-Versions-START--><tr id="PinnedTP"><td>Test</td><td>x.x.x</td></tr><!--Pinned-Versions-END-->
</table>
</td>
</tr>
</table>
<div style="color:black;border:1px solid black;"></div>
Related
I am writing in html a table with several rows with a different number of columns. To do that, I am putting several tables, typically each for a specified number of columns.
For example:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Home</title>
</head>
<body>
<table class="border paddingDefault" style="width:60%; border-collapse: collapse;">
<thead>
<tr>
<th valign="middle" width="55%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Name of rule</span></th>
<th valign="middle" width="5%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Status</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: green;">OK</td>
</tr>
<tr style="border-collapse: collapse;border: 0px; padding:0; margin:0;">
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: red;">KO</td>
</tr>
</tbody>
</table>
<table class="borderNone paddingDefault" style="width:60%; border-collapse: collapse;border: 0px; padding:0; margin:0;">
<thead>
<th valign="middle" width="100%"/>
</thead>
<tbody>
<tr>
<td valign="middle" class="border paddingDefault">the error of index 0<br/>
the error of index 1<br/>
the error of index 2<br/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
with the following stylesheet:
table.middle {
vertical-align: middle;
}
table.borderNone, th.borderNone, td.borderNone {
border: none;
border-collapse: collapse;
}
table.paddingDefault, th.paddingDefault, td.paddingDefault {
padding: 10px 10px;
}
table.border, th.border, td.border {
border: 1pt solid black;
border-collapse: collapse;
}
td.borderTop {
border-right: 1pt solid black;
border-left: 1pt solid black;
border-top: 1pt solid black;
border-bottom: none;
border-collapse: collapse;
}
It works, but I have a small space between the two rows (in my case, the two html tables), that I can't remove:
How could I remove this separation?
You only need add this code to your css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
I have a div:
#box{
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.5s;
position: relative;
height:auto;
width:40em;
border-radius: 8px;
padding: 20px;
background-color: #f7e0a2e8;
}
<div id="box">
<p><b>Steps:</b></p>
<ul>
<li>Select the table where you want to insert data</li><br>
<li>For the input file, the column order should be as shown below:</li><br>
<div style="border: 1px solid black; padding: 10px;">
For <b>quarter master</b>:<br><br>
<table border="1">
<tr>
<td>Qtr_No</td>
<td>Qtr_type</td>
<td>Book_no</td>
<td>Page_no</td>
</tr>
</table>
</div>
<div style="border: 1px solid black; padding: 10px;">
For <b>quarter occupancy</b>:<br><br>
<table border="1">
<tr>
<td>EmpNo</td>
<td>QtrNo</td>
<td>Qtrtype</td>
<td>Book_no</td>
<td>Page_no</td>
<td>Occupation date</td>
</tr>
</table>
</div>
<div style="border: 1px solid black; padding: 10px;">
For <b>employee master</b>:<br><br>
<table border="1">
<tr>
<td>EmpNo</td>
<td>Name</td>
<td>Designation</td>
<td>Department</td>
<td>Billunit</td>
<td>Station</td>
<td>Retirement date</td>
</tr>
</table>
</div><br>
<li><b>It is advisable to backup the database, before uploading data</b></li>
</ul>
</div>
I want to show this div inside my SweetAlert2 dialog when the page loads up. Infact, the div should only be visible in the dialog, not in the page. How do I proceed?
Try putting your div inside the html attribute of Swal.fire
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
icon: 'info',
html:
html:
`<div id="box">
<p><b>Steps:</b></p>
<ul>
<li>Select the table where you want to insert data</li><br>
<li>For the input file, the column order should be as shown below:</li><br>
<div style="border: 1px solid black; padding: 10px;">
For <b>quarter master</b>:<br><br>
<table border="1">
<tr>
<td>Qtr_No</td>
<td>Qtr_type</td>
<td>Book_no</td>
<td>Page_no</td>
</tr>
</table>
</div>
<div style="border: 1px solid black; padding: 10px;">
For <b>quarter occupancy</b>:<br><br>
<table border="1">
<tr>
<td>EmpNo</td>
<td>QtrNo</td>
<td>Qtrtype</td>
<td>Book_no</td>
<td>Page_no</td>
<td>Occupation date</td>
</tr>
</table>
</div>
<div style="border: 1px solid black; padding: 10px;">
For <b>employee master</b>:<br><br>
<table border="1">
<tr>
<td>EmpNo</td>
<td>Name</td>
<td>Designation</td>
<td>Department</td>
<td>Billunit</td>
<td>Station</td>
<td>Retirement date</td>
</tr>
</table>
</div><br>
<li><b>It is advisable to backup the database, before uploading data</b></li>
</ul>
</div>`,
[..]
})
Watch out for the single quotes and double qoutes in your html. I have used backticks/backquotes in the html attribute to get around this.
You can see the result in this pen:
https://codepen.io/julesdeckers/pen/vYdOKGZ
I am having trouble making a table which has arbitrarily sectioned off parts (by using borders on certain cells). I really can't explain this much better besides just showing you what I mean. I tried using a div in each table cell which had a left and right padding value of 10px, but this causes other problems. You will see what I am trying to do and why there are problems here:
table {
border: 2px solid black
}
th {
background-color: white;
}
td, th {
padding: 2px
}
tr:nth-child(even) {
background-color: rgba(200, 200, 200, 0.6);
}
td {
padding-left: 10px;
padding-right: 10px;
}
td .inner {
margin: -1px 0px;
}
.inner {
padding: 2px;
}
<table style="border-collapse: collapse;">
<tr>
<th style="border: 2px solid black;" rowspan="2">
Header
</th>
<th colspan="3">
Header #2
</th>
</tr>
<tr>
<td style="border: 2px solid black; background-color: white;" colspan="3">Header subtitle</td>
</tr>
<tr>
<th>Horizontal Header</th>
<td>
<div class="inner">
foo
</div>
</td>
<td style="border-bottom: 2px solid black;">
<div class="inner">
bar
</div>
</td>
<td style="border-bottom: 2px solid black;">
<div class="inner">
dog
</div>
</td>
</tr>
<tr>
<th style="border-bottom: 2px solid black;">Horizontal Header 2</th>
<td style="border-bottom: 2px solid black; border-right: 2px solid black;">
<div class="inner">
foo
</div>
</td>
<td>
<div class="inner">
bar
</div>
</td>
<td>
<div class="inner">
dog
</div>
</td>
</tr>
<tr>
<th style="border-bottom: 2px solid black;">Horizontal Header 3</th>
<td style="border-bottom: 2px solid black;">
<div class="inner">
foo
</div>
</td>
<td>
<div class="inner" style="border-left: 2px solid black; border-top: 2px solid black;">
bar
</div>
</td>
<td style="border-top: 2px solid black;">
<div class="inner">
dog
</div>
</td>
</tr>
<tr>
<th>Horizontal Header 4</th>
<td>
<div class="inner">
foo
</div>
</td>
<td>
<div class="inner">
bar
</div>
</td>
<td>
<div class="inner">
dog
</div>
</td>
</tr>
</table>
JSfiddle: https://jsfiddle.net/0f82dg4r/.
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.