I am looking for a solution for a responsive HTML table and the closest CSS solution I have found is:
#media screen and (max-width: 600px) {
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;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
}
}
However, the issue with this is I need to have a static data-label for each of my td so that the column header will, which is not very scalable. Does anyone know a way I can write the CSS that will automatically show the column header without me having to specify data-label? Here is my jsfiddle with the current solution where I manually specify data-label:
https://jsfiddle.net/tgpfhn8m/1051/
you should try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<div style="overflow-x:auto;">
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>
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).
I would like to make a border/frame under the text as same as the photo below
table.blueTable {
background-color: #5F80A8;
height: 200px;
width: 50%;
margin: auto;
position: relative;
bottom: -165px;
color: white;
}
table.blueTable td {
font-size: 1.3em;
}
#uno,
#tre,
{
text-align: center;
line-height: 4em;
}
#due,
#quattro,
{
text-align: left;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table6</title>
<table class="blueTable">
<tbody>
<tr>
<td id="uno">初期費用</td>
<td id="due">15万～30万<br>（選択プランによる</td>
</tr>
<tr>
<td id="tre">月額費用</td>
<td id="quattro">5万～15万<br>（選択プランによる）<br>＋SMS送信料 12円/通<br>＋IVR利用料 8円/60秒</td>
</tr>
</tbody>
</tr>
</table>
</body>
</html>
You can add css for table border as below:
td, th {
border: solid 1px;
border-left: none;
border-top: none;
}
Here is your updated code:
table.blueTable {
background-color: #5F80A8;
height: 200px;
width: 50%;
margin: auto;
position: relative;
bottom: -165px;
color: white;
}
td, th {
border: solid 1px;
border-left: none;
border-top: none;
}
table.blueTable td {
font-size: 1.3em;
border-bottom: 1px solid #fff;
}
#uno,
#tre,
{
text-align: center;
line-height: 4em;
}
#due,
#quattro,
{
text-align: left;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table6</title>
<table class="blueTable">
<tbody>
<tr>
<td id="uno">初期費用</td>
<td id="due">15万～30万<br>（選択プランによる</td>
</tr>
<tr>
<td id="tre">月額費用</td>
<td id="quattro">5万～15万<br>（選択プランによる）<br>＋SMS送信料 12円/通<br>＋IVR利用料 8円/60秒</td>
</tr>
</tbody>
</tr>
</table>
</body>
</html>
Hope this helps !
Can you add cellspacing to your table tag. Hope this will solve the issue.
<table class="blueTable" cellspacing="30">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
table.blueTable td {
font-size: 1.3em;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
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
},
});
is it possible that the popup appears always at the same height than the table? If the table moves down the popup should also move down. Or is it possible to add a fourth column and display the popup inside there? Or is there a better approach?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
#matrix table {
width:300px;
border-collapse:collapse;
}
#matrix td {
border:1px solid black;
}
#matrix td:hover {
background-color: #ff0000;
}
#matrix td span {
display: none;
}
#matrix td:hover span {
display: block;
position: absolute;
top: 8px;
left: 310px;
width: 100px;
background: #e5e5e5;
}
</style>
</head>
<body>
<div id="matrix">
<table>
<tr>
<td>1<span>Further information 1</span></td>
<td>2<span>Further information 2</span></td>
<td>3<span>Further information 3</span></td>
</tr>
<tr>
<td>4<span>Further information 4</span></td>
<td>5<span>Further information 5</span></td>
<td>6<span>Further information 6</span></td>
</tr>
<tr>
<td>7<span>Further information 7</span></td>
<td>8<span>Further information 8</span></td>
<td>9<span>Further information 9</span></td>
</tr>
</table>
</div>
</body>
</html>
Try the following on #matrix td:hover span:
display: inline;
and remove the:
top: 8px;
;
#matrix table {
width:300px;
border-collapse:collapse;
}
#matrix td {
border:1px solid black;
}
#matrix td:hover {
background-color: #ff0000;
}
#matrix td span {
display: none;
}
#matrix td:hover span {
display: inline;
position: absolute;
left: 310px;
width: 100px;
background: #e5e5e5;
}
<div id="matrix">
<table>
<tr>
<td>1<span>Further information 1</span></td>
<td>2<span>Further information 2</span></td>
<td>3<span>Further information 3</span></td>
</tr>
<tr>
<td>4<span>Further information 4</span></td>
<td>5<span>Further information 5</span></td>
<td>6<span>Further information 6</span></td>
</tr>
<tr>
<td>7<span>Further information 7</span></td>
<td>8<span>Further information 8</span></td>
<td>9<span>Further information 9</span></td>
</tr>
</table>
</div>
Hope it helps
I was building some tables and went through a lot of iterations. At some point I picked up this weird bottom border on my first row (https://jujusupply.com/pages/customer-gift-notes) and I'm not sure where it's coming from or how to get rid of it? It's just a very simple HTML table.
table {
width: 100%;
}
td {
text-align: center;
font-size: em(14px);
font-style: italic;
padding: 12px;
background-color: #eeeeee;
border: 8px solid white;
height: 200px;
}
td:hover {
background-color: #ffde17;
}
<div style="overflow-x: auto;">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
It's from here :
media="all"
tr:first-child th:after, tr:first-child td:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: -15px;
right: 15px;
border-bottom: 1px solid #1c1d1d;
}
in the theme.scss.css file