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
Related
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
},
});
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>
Whith the fiddle:
https://jsfiddle.net/nwcb1gwk/
When i apply float: left; display: block; to a <td>, the width of <td> is change (and the third block is outside).
I need to apply this for use overflow: hidden.
How i can do exactly the same size of the second table with float ?
.One {
float: left;
display: block;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
div {
width: 150px;
zoom: 400%;
background-color: yellow;
}
table {
border-spacing: 0;
}
<div>
<table>
<tr>
<td class='All One'>X</td>
<td class='All One'>X</td>
<td class='All One'>X</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td class='All'>X</td>
<td class='All'>X</td>
<td class='All'>X</td>
</tr>
</table>
</div>
Try to giving your table display:table and your td's display:table-cell and you dont need other codes. Here is all css i think you need;
table {
display: table;
}
.One {
display: table-cell;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
You can add this to class .One
box-sizing: border-box;
This will include your 1px outline in 50px of td's width. by default it is box-sizing: content-box; which means that width and border are separate.
I have prepare one solution for you ..
Try this one
<html>
<head>
<style>
.One {
float: left;
display: block;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
div {
width: 157px;
zoom: 400%;
background-color: yellow;
}
table {
border-spacing: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td class='All One'>X</td>
<td class='All One'>X</td>
<td class='All One' >X</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td class='All'>X</td>
<td class='All'>X</td>
<td class='All'>X</td>
</tr>
</table>
</div>
</body>
</html>
It will surely works for you.. Thank you
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