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
},
});
Related
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>
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.
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>
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 tried to add a horizontal line inside a <td> tag to achieve :
but this is what I got :
Here is a jsfiddle: http://jsfiddle.net/6qybn8w8/
Please note that I want this <hr /> tag to appear in only few of the <td> and not all. Also, I cannot remove the padding for <td> as I need it to format content of other <td>s
You can do some thing like this.
table {
border: 3px solid #0D94D2;
}
table th,
td {
padding: 4px 10px 4px 5px;
font-size: 12px;
}
table th {
background-color: #0D94D2;
text-align: center;
padding: 0.25em 0.25em;
white-space: nowrap;
}
table td {
width: auto;
text-align: center;
border-bottom: 1px solid #B1DCEA;
white-space: nowrap;
}
hr {
position: relative;
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
width: 118.9%;
left: -6.5%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
One workaround for you to get the expected result without breaking your structure is by using positioning.
Well I've updated the fiddle so you can go through the changes, http://jsfiddle.net/6qybn8w8/2/
HTML:
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
CSS
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}
table td div{
margin-top:10px;
}
hr{
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
position:absolute;
width:100%;
top:-10px;
left:-1px;
}
Set the height of <hr> as 0 and add margin-top to 5px or whatever that you want.
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}
hr{
height: 0em;
border-top: 5px solid green;
margin: 0;
width: 100%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
Updated jsFiddle: http://jsfiddle.net/rdesai/6qybn8w8/5/