I'm having the issue where my colspan header is going behind my default header when I scroll down on my table. How do I fix this?
Also, it appears that on page load, the top of the scroll bar is higher than the top of the table, so when I scroll down the whole table moves up a bit. Not sure why that is.
I've attached some images down below. (P.S. This is for intro to web dev class, keep it simple if you can).
.opendata {
overflow: hidden;
overflow-y: scroll;
height: 500px;
font-size: 14px;
}
.sticky-header {
position: sticky;
top: 0;
border: 1px solid #000000;
}
table {
border-collapse: separate;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
width: auto;
}
th,
td {
padding: 8px 15px;
border: 1px solid #000000;
}
th {
background: #a0a0a0;
}
td {
background: #e0e0e0;
}
<div class="opendata">
<table id='table'>
<thead>
<tr class="sticky-header">
<th colspan="4" style="font-size: x-large; color: white; text-align: center; background: rgb(6, 60, 122);">
E V I C T I O N S</th>
</tr>
<tr class="sticky-header">
<th>Date</th>
<th>Address</th>
<th>Borough</th>
<th>Zip Code</th>
</tr>
</thead>
<tbody>
</div>
Related
How can let the rows at the top (not at the bottom) with fixed tbody height of 500px!
html,body{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main{
margin: 10px;
padding: 10px;
}
table{
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr,th,td{
border: 1px solid;
padding: 3px;
text-align: center;
}
.minHeight{
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
I would clarify it as I get output like this:
But I want it to be like this:
Remove text-align:center on the td and add vertical-align:top
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main {
margin: 10px;
padding: 10px;
}
table {
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr {
border: 1px solid;
padding: 3px;
}
th,
td {
border: 1px solid;
padding: 3px;
vertical-align: top;
}
.minHeight {
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
You are not very descriptive on what you want but I'll give it a try.
I think you mean that you want the numbers on top of the list under the name and not in the center of it's entire box.
If so, then one simple solution is to add padding to the bottom of your first row of data (td). The padding should be equal to the height of your liking (warning: if you add more data you will need to adjust the padding).
So I have table inside bootstrap card:
<div class="card col-5">
<div class="card-body">
<div class="table-view">
<div class="box table fixed-table-body">
<table id="request_data"
class="dataTable no-footer table table-hover table-border" role="grid" style="overflow: visible;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
</table>
</div>
</div>
The table fits into the card but when the screen is resized the table should fit into the card but it expands out, I tried writing #media QUERIES but nothing is working, if someone could please help out.
Thankyou.
There should be a table-responsive class available in Bootstrap that you can use on a wrapping element around the table.
You could try something like this in your code:
<div class="table-responsive">
<table id="request_data"
class="dataTable no-footer table table-hover table-border" role="grid" style="overflow: visible;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
</table>
</div>
Here's some more information about it:
https://getbootstrap.com/docs/5.0/content/tables/
You would have to make the tables responsive via viewports, I have added css for your reference. However, the codepen links below have the working code:
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Some useful resources are as follows:
https://codepen.io/AllThingsSmitty/pen/MyqmdM
https://codepen.io/ismailbaskin/pen/KgAGRr
https://codepen.io/MartijnCuppens/pen/JMyOgv
Ps. Please note that these are for references only and is not my piece of work.
I have no access to change core HTML, only CSS, but the tables I am working with have a weird gap in the corners that I am trying to fix.
.tabular-container {
border: 2px solid #0093c9;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
.heading-row {
background: #0093c9;
font-weight: bold;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
}
th,
td {
padding: 10px;
text-align: left;
}
<div class="tabular-container">
<table class="">
<thead class="">
<tr class="heading-row">
<th colspan="2">Rounded corners table</th>
</tr>
</thead>
<tbody>
<tr class="tabular__row">
<td>kk</td>
<td>kk</td>
</tr>
<tr class="tabular__row">
<td colspan="2">This is a sample table only</td>
</tr>
</tbody>
</table>
</div>
Does turning the whole table and div background into the color and the tbody back to white do the trick?
.tabular-container {
background: #0093c9;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
background: #0093c9;
}
tbody{
background: white;
}
.tabular-container {
border: 2px solid #0093c9;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
background: #0093c9;
}
.heading-row th{
font-weight: bold;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
background: #0093c9;
}
th,
td {
padding: 10px;
text-align: left;
}
tbody{
background: white;
}
<div class="tabular-container">
<table class="">
<thead class="">
<tr class="heading-row">
<th colspan="2">Rounded corners table</th>
</tr>
</thead>
<tbody>
<tr class="tabular__row">
<td>kk</td>
<td>kk</td>
</tr>
<tr class="tabular__row">
<td colspan="2">This is a sample table only</td>
</tr>
</tbody>
</table>
</div>
Simple, set: border-radius:0; on your table.
The browser is trying to set the radius of the table's corners to match, but is getting a rounding error. By using radius:0 you are forcing the browser to 'clip' the corner instead.
The Table with bad text-alignment
In the Picture u see the table with bad text-alignment. The elements of tbody don't fit to those of thead. It's important that the head of the table is fixed, so you can see it even when you scroll down.
The classes i am using for this table are table-hover and my own class "table_Bookingsystem" which propertys are listed below
.table_Bookingsystem{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-top: 16px;
padding-bottom: 16px;
border: 1px solid #ccc !important;
}
.table_Bookingsystem tbody{
display:block;
width: 100%;
overflow: auto;
}
.table_Bookingsystem thead tr {
display: block;
}
.table_Bookingsystem tr{
border-bottom: 1px solid #ddd;
}
.table_Bookingsystem thead {
background: black;
color:#fff;
}
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
width: 5000px; //important line
}
.table_Bookingsystem tbody tr:nth-child(even) {
background-color: #e4ebf2;
color: #000;
}
<table class="table_Bookingsystem table-hover ">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Auto</th>
<th scope="col">IMEI</th>
<th scope="col">Heimatstadt</th>
<th scope="col">derzeitige Stadt</th>
</tr>
</thead>
<tbody #if(count($cars) > 9) style="height: 300px;" #endif>
#foreach($cars as $car)
<tr class="table-row clickable-row" data-href='/cars/{{$car->id}}'>
<th>{{$loop->iteration}}</th>
<td>{{$car->name}}</td>
<td>{{$car->IMEI}}</td>
<td>
<?php
$city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_homeCity)->get('name');
echo $city[0]->name; ?>
</td>
<td>
<?php
$city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_currentCity)->get();
echo $city[0]->name; ?>
</td>
</tr>
#endforeach
</tbody>
</table>
When i set the width to 250px it looks a little better but then there is a big edge when i have only 4 or less columns. Is there any way to keep the fixed header and put every -element of directly under the corresponding -element of ?
I write a basic table like you share in screenshot. You have added some extra CSS that's why your table ui disturb.
Step 1 - Remove below CSS, we don't need to block table row.
.table_Bookingsystem thead tr {
display: block;
}
Step 2 - Remove display: block; from table_Bookingsystem tbody
.table_Bookingsystem tbody{
width: 100%;
overflow: auto;
}
Step 3 - I just remove width: 5000px; from .table_Bookingsystem th, .table_Bookingsystem td, if you want apply width: 5000px; on each td/th, revert it.
All Mentioned are applied on below code snippet. Try it I hope it'll help you out. Thanks
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
}
.table_Bookingsystem{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-top: 16px;
padding-bottom: 16px;
border: 1px solid #ccc !important;
}
.table_Bookingsystem tbody{
width: 100%;
overflow: auto;
}
.table_Bookingsystem tr{
border-bottom: 1px solid #ddd;
}
.table_Bookingsystem thead {
background: black;
color:#fff;
}
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
}
.table_Bookingsystem tbody tr:nth-child(even) {
background-color: #e4ebf2;
color: #000;
}
<table class="table_Bookingsystem">
<thead>
<tr>
<th>#</th>
<th>Auto</th>
<th>IMEI</th>
<th>Heimatstadt</th>
<th>derzeitige Stadt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Auto</td>
<td>0001</td>
<td>Regensburg</td>
<td>Regensburg</td>
</tr>
<tr>
<td>1</td>
<td>Auto</td>
<td>0001</td>
<td>Regensburg</td>
<td>Regensburg</td>
</tr>
</tbody>
</table>
Try adding text-align: center; to the .table_Bookingsystem tbody rule as it's on the .table_Bookingsystem td rule.
I am new on the techno asp.net (C#)I try to create one a table or a grid view which have column fix when one scroll vertically but the problem which I have it is when I want to scroll horizontally the two first columns must be fixed I try to use this code bellow I try to use the scroll to help user to see the data when we have too many lines can anyone try to help me please
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrollable HTML table with CSS Style</title>
<style type="text/css">
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #B34C00;
width:40%;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #000;
}
td, th {
border-bottom:1px solid #000;
background: #fff;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
</style>
</head>
<body>
<form id="form1">
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>User Name<div>User Name</div></th>
<th>Education<div>Education</div></th>
<th>Location1<div>Location1</div></th>
<th>Location2<div>Location2</div></th>
<th>Location3<div>Location3</div></th>
<th>Location4<div>Location4</div></th>
<th>Location5<div>Location5</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Suresh Dasari</td><td>B.Tech</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Rohini Dasari</td><td>Msc</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Madhav Sai</td><td>MBA</td><td>Nagpur</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Praveen Kumar</td><td>B.Tech</td><td>Guntur</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Mahendra Dasari</td><td>CA</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Nagaraju Dasari</td><td>MCA</td><td>USA</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Sateesh Alavala</td><td>MD</td><td>Vizag</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Sudheer</td><td>B.Tech</td><td>Kakinada</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</body>
</html>
I am Using Fixed column to my bootstrap Datatable. This link is
https://datatables.net/examples/styling/bootstrap
Added CSS file in your csHtml file
#Styles.Render("~/Content/fixedColumns.dataTables.min")
<style>
div.DTFC_LeftBodyLiner {
overflow-x: hidden;
}
div.DTFC_RightBodyLiner {
overflow-x: hidden;
}
</style>
Then Added Js File in your csHtml file :
<script src="~/Scripts/dataTables.fixedColumns.min.js"></script>
Using this code in your Js DataTable
$('#DataGrid').dataTable({
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
});