I have custom CSS for my tablepress tables, but for one particular table I would like to include cell borders. When I try to add my custom CSS code to the extra CSS classes section for that table, it tells me it is invalid. Can you help?
The extra css is:
.tablepress td { border: 1px solid #DDDDDD; }
My custom CSS for all tables is
.tablepress { background-color: #CDCDCD; margin: 10px 0 15px 0; font-size: 11pt; width: 98%; text-align: left; }
.tablepress th { background-color: #E6EEEE; border: 1px solid
#FFFFFF; padding: 4px; }
.tablepress td { color: #3D3D3D; padding: 4px; background-color:
#FFFFFF; vertical-align: top; }
.tablepress .even td { background-color: #FFFFFF; }
.tablepress .odd td { background-color: #F0F0F6; }
.tablepress .header { background-image: url(http://lifeinthefastlane.com/wp-content/plugins/wp-table-reloaded/img/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; }
.tablepress .headerSortUp { background-color: #8DBDD8; background-image: url(http://lifeinthefastlane.com/wp-content/plugins/wp-table-reloaded/img/asc.gif); }
.tablepress .headerSortDown { background-color: #8DBDD8; background-image: url(http://lifeinthefastlane.com/wp-content/plugins/wp-table-reloaded/img/desc.gif); }
Related
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 vertical table with header as sortable using following code. Column are vertical but how can they be sorted by clicking header.
CSS Code:
<style>
#tabs{
}
#vartabs .ui-widget-header {
background-color: white;
background-image: none;
border-top: none;
border-right: none;
border-left: none;
}
#vartabs .ui-widget-content {
background-color: white;
background-image: none;
}
#vartabs .ui-corner-top,#tabs .ui-corner-bottom,#tabs .ui-corner-all{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#vartabs .ui-state-default,
#vartabs .ui-state-default a {
background-color: white;
text-align: center;
}
#vartabs .ui-state-default a {
width: herepx;
}
#vartabs .ui-tabs-active,
#vartabs .ui-tabs-active a {
background-color: darkgray;
text-align: center;
}
</style>
<style>
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(0px, 51px)
/* 45 is really 360 - 45 */
rotate(270deg);
width: 8px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
table tbody
{
overflow: auto;
height: 10px;
}
.scroll {
max-height: 700px;
overflow: auto;
}
th
{
width: 72px;
}
</style>
I found another code on net for sorting table but it is bit difficult to merge to codes as their logic is bit different.
You cannot sort tables just with HTML and CSS. You'll either need to do it on the client via JavaScript, or server-side via whatever programming language you're using to generate the page.
I'm probably missing something terribly obvious but I can't hack my way into the proper layout for my table. I have some nested tables. The innermost tables are all class=cell and I want to control the padding for the td elements in these tables. Here is the CSS:
.cell
{
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
height: 24px;
}
When I add this to either selection above it has no effect on the table:
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
I have no other CSS that affects the td element. What am I doing wrong?
Thanks.
EDIT: Here is the complete CSS. It is applied to a set of nested tables. The outer, containing table is class=outer. It contains two tables for the left and right columns and in the columns the tables with class=cell are stacked on top of each other:
.outer
{
border: none;
margin-left: auto;
margin-right: auto;
}
.outer td
{
vertical-align: top;
}
.column
{
border: none;
}
#rightColumn table, #leftColumn table
{
width: 100%;
}
.cell
{
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
height: 24px;
padding-left: 3px;
padding-right: 3px;
}
.image
{
padding: 0;
margin: 0;
width: 75px;
}
.messages td
{
border-collapse: collapse;
border: 2px solid #FF0000;
text-align: left;
}
h1
{
text-align: center;
font-size: 350%;
}
h2
{
text-align: center;
}
th
{
background-color: #2B60DE;
color: #FFFFFF;
}
.gray
{
background-color: #AAAAAA;
}
.blue
{
background-color: #2B60DE;
}
.orange
{
background-color: #FFA500;
}
.green
{
background-color: #00FF00;
}
.red
{
background-color: #FF0000;
}
.yellow
{
background-color: #FFFF00;
}
.white
{
background-color: #FFFFFF;
}
.cell .span2
{
vertical-align: bottom;
}
.centered
{
text-align: center;
padding: 10px;
}
Try adding position: relative; to the css rules you have. + it would be nice to actually see your html.
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************************************/