I have been trying for a few weeks and I tried multiple solutions I found here however the header scroll down and doesn't stick to the top. I do have position sticky and top: 0
I have read somewhere that overflow auto or hidden cause the table to scroll. but when I remove that my table doesn't scroll at all. I still want my table to scroll just not the header
Here is my CSS
.common-main-table {
max-height: 60rem !important;
overflow-y: scroll;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
table {
table-layout: auto;
margin-bottom: 0px !important;
border-collapse: separate;
border-spacing: 0;
width: 100%;
thead {
background: var(--table-main-heading-bg);
background: red;
text-align: start;
th {
position: absolute;
border-bottom-width: 1px !important;
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
tr th {
vertical-align: middle;
font-size: 17px;
font-weight: 700;
line-height: 18px;
color: var(--table-header-text) !important;
padding-top: 15px;
padding-bottom: 15px;
}
}
thead tr th:first-child {
padding-left: 30px;
}
thead tr th:last-child {
padding-right: 30px;
}
tbody {
background-color: var(--content-bg-color);
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
tr td {
vertical-align: middle;
font-size: 16px;
font-weight: 500;
line-height: 18px;
color: var(--table-main-text);
text-align: start;
}
}
tbody tr:hover {
background-color: var(--table-main-heading-bg);
}
tbody tr:last-child td {
border-bottom: 0px solid white !important;
}
tbody tr td:first-child {
padding-left: 30px;
}
tbody tr td:last-child {
padding-right: 30px;
}
tr th,
tr td {
border-right: 0px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
// &:nth-child(2n + 2) {
// border-right: 1px solid rgba(0, 0, 0, 0.1);
// }
}
}
table th {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid;
border-right: 1px solid;
}
table td {
border-top: 0px solid;
border-bottom: 1px solid;
border-right: 1px solid;
}
}
Related
I was writing some CSS for a very common user login form, except that when I logged in from another computer with the same browser (Firefox) and operating system (Ubuntu), some strange white borders emerged on the outside.
What's even stranger is that they tend to appear and disappear simply by resizing the window.
Because? how can this be prevented?
Thanks everyone for the help! :)
HTML:
<div class="npt nptFocus">
<span>Aa</span>
<input type="text" name="usr" placeholder="Nickname">
</div>
LESS:
// Palette
#main_color: blue;
#main: darken(saturate(#main_color, -97%), 25%);
#neutral: saturate(darken(#main_color, -25%), -25%);
#verde: #118769;
#rosso: #fe5f55;
#bianco: darken(saturate(#main_color, -40%), -45%);
#v_soft = 10%;
#v_medium = 25%;
#v_hard = 40%;
#neutral_dark: darken(#neutral, #v_soft);
#verde_dark: darken(#verde, #v_soft);
#rosso_dark: darken(#rosso, #v_hard);
#main_light: lighten(#main, #v_hard);
#main_dark: darken(#main, 8%);
#radius: 5px;
.npt {
display: table;
background: #bianco;
border-radius: #radius;
border: solid 1px #main_light;
width: 100%;
overflow: hidden;
input, span{
display: table-cell;
padding: 10px;
transition: 0.25s;
}
input {
border: none;
background: none;
border-radius: 0px;
color: #main;
width: 100%;
}
span {
border-right: solid 1px darken(#main_light, -15%);
color: darken(#main, -40%);
background: darken(#main_light, -25%);
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
&.nptFocus {
border: solid 1px #neutral_dark;
span {
border-right: solid 1px #neutral_dark;
color: #bianco;
background: #neutral_dark;
}
}
}
SCREEN:
UPDATE 1: Added compiled CSS
.npt {
display: table;
background: #ebebfa;
border-radius: 5px;
border: solid 1px #a3a3a8;
width: 100%;
overflow: hidden;
}
.npt input,
.npt span {
display: table-cell;
padding: 10px;
transition: 0.25s;
}
.npt input {
border: none;
background: none;
border-radius: 0px;
color: #3e3e42;
width: 100%;
}
.npt span {
border-right: solid 1px #cacace;
color: #a3a3a8;
background: #e5e5e6;
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
.npt.nptFocus {
border: solid 1px #6363e9;
}
.npt.nptFocus span {
border-right: solid 1px #6363e9;
color: #ebebfa;
background: #6363e9;
}
.npt.nptError {
border: solid 1px #fe5f55;
}
.npt.nptError span {
border-right: solid 1px #fe5f55;
color: #ebebfa;
background: #fe5f55;
}
.npt.nptError.nptFocus {
border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
border-right: solid 1px #d38580;
background: #d38580;
}
.npt.nptOk {
border: solid 1px #118769;
}
.npt.nptOk span {
border-right: solid 1px #118769;
color: #ebebfa;
background: #118769;
}
.npt.nptOk.nptFocus {
border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
border-right: solid 1px #6cac9b;
background: #6cac9b;
}
UPDATE 2:
Following the help of #Manas Khandelwal and the tests carried out together, it seems that this is due to a browser rendering error as the logo above the form, having the width declared as a percentage, will never have a height with an integer value .
Ideas?
Really the only solution is really having to round all the heights via JavaScript?
$('.roundHeight').each(function(){
if(!$(this).is("[data-exmargin]")) $(this).attr('data-exmargin',parseFloat($(this).css('marginTop')));
var d = parseFloat($(this).attr('data-exmargin')) - ($(this).height() - Math.floor($(this).height()));
$(this).css('marginTop', d + 'px');
});
Add outline: none; to the input element;
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQwP
I would like to replicate the same design as in this screenshot:
I have been able to replicate some of this design styling the vuetify data table with the following CSS:
.v-data-table {
#extend .elevation-0;
.v-data-table__wrapper {
table {
td,
th {
padding-left: 16px !important;
min-width: 170px !important;
border: 1px solid #e8e8e8 !important;
border-bottom: none !important;
font: 14px/40px !important;
text-align: left !important;
}
td {
color: #666 !important;
}
tr {
display: block !important;
}
th {
color: #333 !important;
}
tbody {
tr {
#include radius(xl);
#include elevation(4, true);
margin: 20px 5px;
background-color: #fbfbfb !important;
cursor: pointer !important;
}
}
thead.v-data-table-header tr {
th {
color: #818087 !important;
box-shadow: none !important;
border: none !important;
border-bottom: none !important;
}
}
tbody tr td {
border: none !important;
height: 65px;
}
}
}
}
The only problem I'm facing is that some of the rows are not alligned with the values of each cell:
As you can see the current table doesn't have the Plans header alligned with it's values. If the usere have more than one activity group the cell takes up too much space.
You can check out a minimum reproducible problem here: https://codepen.io/teresakk/pen/MWyXaWv
I have solved the problem with the help from another answer on stackoverflow:
(https://stackoverflow.com/a/16971333/4581336)
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
th {
background-color: map-get($grey, 'lighten-5') !important;
border: none !important;
box-shadow: none !important;
}
td {
border: solid 1px transparent;
border-style: solid none;
padding: 20px;
background-color: map-get($shades, 'white');
height: 60px !important;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
I am working on an asp.net grid. I want to apply a 3D effect on the grid using CSS. Below is the CSS I am using currently. Is it possible to add CSS to the below CSS to achieve the 3D effect on an asp.net grid/html table?
.mGrid {
width: 100%;
background-color: #F1F7FE;
margin: 5px 0 10px 0;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
.mGrid td {
padding: 2px;
border: 1px solid #ffffff;
color: #001131; /*word-break:break-all;word-wrap:break-word;*/
/*border-style: solid;
border-width: 1px;
border-color: #666 #DDD #DDD #666;
padding: 3px;*/
}
.mGrid th {
background-position: top;
padding: 4px 2px;
color: #1F364E;
background: #B7D6FF url(../../Images/outlook/grid_head.png) repeat-x top;
border: solid 2px #eeeeee;
font-size: 0.9em; /*word-break:break-all;word-wrap:break-word;*/
}
.mGrid .alt {
background-position: top;
background: #D9EAFE repeat-x top;
}
You can sail around the problem that table cells behave a bit different than other HTML elements by using CSS3 after or before pseudo elements and put them on top of your tds.
.mGrid td {
padding: 2px;
position: relative;
}
.mGrid td:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-style: solid;
border-width: 1px;
border-color: #666 #DDD #DDD #666;
padding: 3px;
}
JS-Fiddle
I want to fix the table width using Display Tag.
.displayTable table {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.displayTable th, .displayTable td {
padding: 2px 4px 2px 4px !important;
text-align: left;
vertical-align: top;
width: 100%
}
.displayTable thead tr {
background-color: #9999CC;
}
.displayTable th.sorted {
background-color: #9999CC;
}
.displayTable th a,.displayTable th a:visited {
color: black;
}
.displayTable th a:hover {
text-decoration: underline;
color: black;
}
.displayTable th.sorted a,.displayTable th.sortable a {
background-position: right;
display: block;
width: 100%;
}
.displayTable th.sortable a {
background: url(../img/arrow_off.png) no-repeat right center ;
}
.displayTable th.order1 a {
background: url(../img/arrow_down.png) no-repeat right center ;
}
.displayTable th.order2 a {
background: url(../img/arrow_up.png) no-repeat right center;
}
.displayTable tr.odd {
background-color: #fff
}
.displayTable tr.tableRowEven,.displayTable tr.even {
background-color: #fff
}
.displayTable div.exportlinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
margin: 2px 0 10px 0;
width: 79%;
}
.displayTable span.export {
padding: 0 4px 1px 20px;
display: inline;
display: inline-block;
cursor: pointer;
}
.displayTable span.excel {
background-image: url(../img/ico_file_excel.png);
}
.displayTable span.csv {
background-image: url(../img/ico_file_csv.png);
}
.displayTable span.xml {
background-image: url(../img/ico_file_xml.png);
}
.displayTable span.pdf {
background-image: url(../img/ico_file_pdf.png);
}
.displayTable span.rtf {
background-image: url(../img/ico_file_rtf.png);
}
.displayTable span.pagebanner {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
margin-top: 10px;
display: block;
border-bottom: none;
}
.displayTable span.pagelinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
display: block;
border-top: none;
margin-bottom: -5px;
}
Depends on the data loaded, the table width varies. So, I want to make it look better by fixing the width of table. But I can't. How can I make it to fix the table width?
I try to wrap the Display with Div and set the css class of Div too. But It still doesn't work (for both display:table-cell or display:inline-block;. Thanks.
.commonList{
overflow: hidden;
background: #c0c0c0;
display: table-cell
text-align: center;
width: 100%;
height: 100%;
}
Edited: When I try to wrap the display table with Div of the above css setting, table width become 100% . but as each of the column of table has various width, it becomes so ugly because the first column becomes so wide (which only display id ,1 ,2 ,3 etc) And even my display tag pagination gone. How can I solve it? Thanks.
.displayTable table {
table-layout:fixed;
}
Specify table layout as fixed and that will solve ur problem
Here is my solution. for each columns, specify a certain class and use in Display Tag.
.displayTable {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.colId{
width: 2%;
}
<display:column class="colId">
I'm using Devexpress's MVC exctensions within my MVC3 w/razor project. I have data grids using Devexpress's MVC extensions and also basic html tables without any styling.
Is there a way to apply the devexpress styles to my html tables for a consistent look?
You can use css to style a grid then follow the same principle for a table. Here is a style for a grid I created then styles for a similar looking table
/************************GRID STYLE************************************/
.mGrid
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px; /*width: 820px;*/
text-align: center;
}
.mGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
}
.mGrid th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
.mGrid .alt
{
background: #fcfcfc url(images/grd_alt.png) repeat-x top;
}
.mGrid .pgr
{
background: #424242 url(images/grd_pgr.png) repeat-x top;
text-align: left;
}
.mGrid .pgr table
{
margin: 5px 0;
}
.mGrid .pgr td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a
{
color: #666;
text-decoration: none;
font-size: 13px;
}
.mGrid .pgr a:hover
{
color: #AED434;
text-decoration: none;
font-size: 13px;
}
/************************END GRID STYLE************************************/
/************************mGrid Table Look alike STYLE************************************/
.mGridLookAlikeTable
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px;
/*width: 820px;*/
text-align: center;
}
.mGridLookAlikeTable td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
}
.mGridLookAlikeTable th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
/************************END mGrid Table Look alike STYLE************************************/