Table rows not filling full length - html

I am using a Bootstrap table design and I have 8 header cells and 5 body cells, but for some reason the rows are only stretching across 4 columns. I am not sure why and have hit a blank.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">B2C2</th>
<th scope="col">Kraken</th>
<th scope="col">CEX</th>
<th scope="col">Qredo</th>
<th scope="col">Gemini</th>
<th scope="col">Coinbase</th>
<th scope="col">Galaxy</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">BTC</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ETH</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ADA</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">DAT</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">TEST</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
This currently looks like this:
Any help would be appreciated thank you!


Hi add <td></td> tag 4 more time. check this code. It will help.
<!DOCTYPE html>**strong text**
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">B2C2</th>
<th scope="col">Kraken</th>
<th scope="col">CEX</th>
<th scope="col">Qredo</th>
<th scope="col">Gemini</th>
<th scope="col">Coinbase</th>
<th scope="col">Galaxy</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">BTC</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ETH</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ADA</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">DAT</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">TEST</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>**strong text**
</table>
</html>


Realised what I was doing wrong, so to make the rows go across all the columns I needed to add the same amount of td tags to how many theads I had, for example I had 3 td's and needed to add 4 more.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">B2C2</th>
<th scope="col">Kraken</th>
<th scope="col">CEX</th>
<th scope="col">Qredo</th>
<th scope="col">Gemini</th>
<th scope="col">Coinbase</th>
<th scope="col">Galaxy</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">BTC</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ETH</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">ADA</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">DAT</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">TEST</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Related

How can I make my table height smaller in bootstrap 4?

How can I make my table height smaller? I've tried adjusting the height on the <tr> through CSS but it seems like the height it's currently using is the smallest it will get. I can make it larger but anything under height: 50px, I don't notice a difference.
Here's my table now. I just want to make the row height smaller to compress the table so it fits on the screen without having to scroll down.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Overtime Hours</th>
<th scope="col">Compensation Hours</th>
<th scope="col">Vacation</th>
<th scope="col">Personal Hours</th>
<th scope="col">Sick Hours</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carry Over</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Allotted</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Starting Total</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Jan</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Feb</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Mar</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Apr</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">May</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Jun</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Jul</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Aug</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Sep</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Oct</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Nov</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Dec</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Yearly Total</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Balance in Hours</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Balance in Days</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Accordingly to the Bootstrap docs:
You can simply use table-sm as a complement for your table, to make tables more compact by cutting cell padding in half. It would be like:
<table class="table table-striped table-sm">
<thead>
...
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
As recommended to be responsive, you can use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
Example:
<div class="table-responsive-sm">
<table class="table table-striped">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table table-striped">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table table-striped">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table table-striped">
...
</table>
</div>

as you are using bootstrap. you may use <table class="table table-striped table-sm"> class

Add a two column above div but that column and div should not have gap

In div class background color is black, My question is make a two column in anyway so that the div class of horizontal line should not have gap while making a column.
Suppose i create a two column first and after i make a div class, the output will be shown the gap between column and div , I don't want that gap
<div class="right-div" style="background-color:black">
<table border="2px" style="background-color:red">
<tr>
<th bgcolor="#339A99"><font color="white">S.NO</font></th>
<th bgcolor="#339A99"><font color="white">Course</font></th>
<th bgcolor="#339A99"><font color="white">Duration</font></th>
<th bgcolor="#339A99"><font color="white">Credit Hours</font></th>
<th bgcolor="#339A99"><font color="white">No. Of Learners</font></th>
<th bgcolor="#339A99"><font color="white">Action</font></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Table column doesn't want get the width from CSS

I have a table with a nested table. I want to align each column with the nested column, so it looks the same width, as well both are responsive table's.
I can't get around the size for both table with independent id's, but as reference i put 11:00 in 2 cells, they should basically align in display.
I try to control it via CSS and it should be like this.
I have a snippet below, this includes bootstrap 4 css.
/* Below is the Schedule Part for the Reservation Manager */
#reservationManagerScrolltbody {
height: 10em;
/* Just for the demo */
overflow-y: auto;
/* Trigger vertical scroll */
overflow-x: auto;
/* Trigger horizontal scroll */
width: 100px;
}
#table2 td+td {
border-left: 2px solid #F5F5F5;
}
#table2 th+th,
th,
td {
border-left: 2px solid #F5F5F5;
font-size: 0.75vw;
width: 50px;
}
#waiterStationTableinfo td+td,
th {
border-left: 1px solid #F5F5F5;
}
.wstinfo {
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- right container -->
<div id="right">
<h6 style="font-size:1vw; ">Search by any table</h6>
<input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="text" id="reservationManagerListTableNumberInput" placeholder="Search for any table.. ">
<table class="table table-responsive table-sm table-hover" style="margin-top:0.5em;" id="table2">
<thead class="header">
<tr>
<!-- if checkbox is checked, clone reservation subjects to the whole table row -->
<th class="wstinfo">
<input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
<input id="report" type="checkbox" title="Show Assignment report" />
</th>
<th class="wstinfo">1</th>
<th class="wstinfo">1</th>
<th class="wstinfo">1</th>
<th class="redips-mark dark">11:00</th>
<th class="redips-mark dark">11:30</th>
<th class="redips-mark dark">12:00</th>
<th class="redips-mark dark">12:30</th>
<th class="redips-mark dark">13:00</th>
<th class="redips-mark dark">13:30</th>
<th class="redips-mark dark">14:00</th>
<th class="redips-mark dark">14:30</th>
<th class="redips-mark dark">17:00</th>
<th class="redips-mark dark">17:30</th>
<th class="redips-mark dark">18:00</th>
<th class="redips-mark dark">18:30</th>
<th class="redips-mark dark">19:00</th>
<th class="redips-mark dark">19:30</th>
<th class="redips-mark dark">20:00</th>
<th class="redips-mark dark">20:30</th>
<th class="redips-mark dark">21:00</th>
<th class="redips-mark dark">21:30</th>
<th class="redips-mark dark">22:00</th>
</tr>
</thead>
<tbody class="reservationManagerScrolltbody">
<tr>
<td colspan="24" class="reservationManagerTableType">
<table class="table table-sm waiterStationTableinfo">
<thead class="header">
<tr>
<th class="wstinfo">TN</th>
<th class="wstinfo">TT</th>
<th class="wstinfo">RA</th>
<th class="wstinfo">GA</th>
<th colspan="20" style="text-align:center;"> Waiterstation 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td>11:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>22:00</td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>4 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="24" class="reservationManagerTableType">
<table class="table table-sm waiterStationTableinfo">
<thead class="header">
<tr>
<th class="wstinfo">TN</th>
<th class="wstinfo">TT</th>
<th class="wstinfo">RA</th>
<th class="wstinfo">GA</th>
<th colspan="20" style="text-align:center;"> Waiterstation 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>154</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- right container -->

How to create table according to screenshot using html and css

I have only problem with the small column. How to create the small column.

Here is a rough solution, using the rowspan and colspan attributes:
<style>
th, td {
border:1px solid black;
}
table {
border-collapse:collapse;
}
</style>
<table>
<tr>
<th rowspan="2">Description of waste</th>
<th rowspan="2" colspan="6">List of wastes</th>
<th rowspan="2">Quantity</th>
<th colspan="2">The chemical/biological components</th>
<th rowspan="2">Physical form</th>
<th rowspan="2">Hazard code(s)</th>
<th rowspan="2">Container type</th>
</tr>
<tr>
<th>Component</th>
<th>Concentration</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

how to change width of <th> without affecting <td> width

I have here 2 photos. 1 is my HTML page and the other one is my print page.
My question is, how am I going to make my print page the same as my html page? As you can see, the print page is less wide than the HTML page.
Also, I want to ask how am I going to make the width of <th> longer without affecting the width of <td>? Is that possible?
Sorry, I don't have that much knowledge in CSS.
Print Page
HTML Page
and here is my code:
<table width="100%" border="1">
<tr>
<th align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

To get a nice print page width use media queries for example:
#media print {
#page {
margin: 30mm;
size:297mm 210mm;
}
}
Or use diffent stylesheets with different widths in stead of the same 100%
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
And in the style.css add:
table {width:100%}
And in style_print.css add:
table {width:297mm}
Play with the widths untill you are happy in both ;)
Here are some great posts on how to set up CSS for printing:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
Just add colspan="6" to your th to set the correct width of your first cell.
<table width="100%" border="1">
<tr>
<th colspan="6" align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Tip: When I don't know what my html elements are doing I give them a border so I can see how they are behaving. In this case you don't have the same amount of <th> cells as <td> cells - just add a colspan=6 ( the same number of cells you have ) and your <th> cell will span across the whole table:
<tr>
<th colspan="6" align="left">II. Documentation</th>
</tr>
also you don't require the width unless you are trying to wrap the text ( but it sounds like you aren't. ) ...
oh, nevermind... answered above