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.
Related
I want the buttons to line up with the numbers. Is therre anyway to make the buttons static or perhaps making the numbers dynamic? I would also appreciate i there´s any best practices when adding CSS to a table because to be honest I mostly just try things out.
Windowed:
Fullscreen:
CSS:
table {
width: 100%;
}
thead {
padding: 3px;
height: 70px;
width: 100%;
table-layout: fixed;
}
td {
padding: 3px;
}
.greenButton,
.yellowButton,
.redButton {
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: 0.6em;
padding-bottom: 0.6em;
color: black;
background-color: rgb(82, 202, 126);
border: solid #cccccc 1px;
border-radius: 5px;
box-shadow: 2px 2px 1px #888888;
clear: right;
float: right;
font-size: small;
}
.greenButton:hover {
background-color: yellow;
}
.redButton {
background-color: rgb(171, 176, 177);
}
.yellowButton {
background-color: rgb(235, 243, 113);
}
.numbers {
display: inline-block;
width: 100%; /* set to 100% */
height: 20%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: 1.1em;
padding-bottom: 0.6em;
text-align: right;
}
nav.page-nav {
background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}
nav.page-nav .container {
display: -ms-flexbox;
}
nav.page-nav a {
display: block;
width: 9rem;
padding: 0 1.8rem;
border-right: 1px dotted #3d3d3d;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #c3c3c3;
text-shadow: 0 1px 0 #000;
}
nav.page-nav a:first-child {
border-left-width: 1px;
border-left-color: #3d3d3d;
}
nav.page-nav a:hover {
color: #e4e4e4;
background-color: black;
}
nav.page-nav .active {
color: white;
background: -ms-linear-gradient(#c95656, #8d0606);
background: linear-gradient(#c95656, #8d0606);
}
nav.page-nav .active:hover {
color: #fff;
}
nav.page-nav .active:before {
position: absolute;
top: 6rem;
display: block;
height: 0;
width: 0;
margin-left: -1.9rem;
border-top: 2rem solid #8d0606;
border-right: 6.5rem solid transparent;
content: "";
}
nav.page-nav .active:after {
position: absolute;
display: block;
height: 0;
width: 0;
margin-left: 4.3rem;
border-top: 2rem solid #8d0606;
border-left: 6.5rem solid transparent;
content: "";
}
<nav class="page-nav">
<div class="container">
Home
About
Schedule
Register
</div>
</nav>
I am confused with the display: block in the nav.page-nav a selector. If I change it to display: inline-block nothing change. Why?
I am also confused with the :before and :after. How do they work in the above code? I mean before supposed to be before the element no bellow it. They are shown bellow each active element.
The most common difference between display:block and inline-block is there alignment.
Display:Block by default takes full width and assigned height to there elements. Placement of display:block elements are one after another, whereas to align them in one line i.e. horizontally we need to use float:left, but display:inline-block elements are by default align in inline no need to used float:left.
Pseudo ::before - is used to assign some content or some style properties before the targeted element, but as you have assigned top:6rem to nav.page-nav .active:before so your before element is at bottom of target element.
Pseudo ::after - is used to assign some content or some style properties after the targeted element.
nav.page-nav {
background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}
/* TODO: nav.page-nav .container */
nav.page-nav .container {
display: -ms-flexbox;
}
/* TODO: nav.page-nav a */
nav.page-nav a {
display: block;
width: 9rem;
padding: 0 1.8rem;
border-right: 1px dotted #3d3d3d;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #c3c3c3;
text-shadow: 0 1px 0 #000;
position:relative;
}
/* TODO: nav.page-nav a:first-child */
nav.page-nav a:first-child {
border-left-width: 1px;
border-left-color: #3d3d3d;
}
/* TODO: nav.page-nav a:hover */
nav.page-nav a:hover {
color: #e4e4e4;
background-color: black;
}
/* TODO: nav.page-nav .active */
nav.page-nav .active {
color: white;
background: -ms-linear-gradient(#c95656, #8d0606);
background: linear-gradient(#c95656, #8d0606);
}
/* TODO: nav.page-nav .active:hover */
nav.page-nav .active:hover {
color: #fff;
}
/* TODO: nav.page-nav .active:before */
nav.page-nav .active:before {
position: absolute;
top:6rem;
left:0;
display: block;
height: 0;
width: 0;
border-top: 2rem solid #8d0606;
border-right: 6.5rem solid transparent;
content: "";
}
/* TODO: nav.page-nav .active:after */
nav.page-nav .active:after {
position: absolute;
display: block;
height: 0;
width: 0;
border-top: 2rem solid #8d0606;
border-left: 6.5rem solid transparent;
content: "";
bottom:-2rem;
right:0;
}
<nav class="page-nav">
<div class="container">
Home
About
Schedule
Register
</div>
</nav>
I'm trying to use a css wizard type component i found:
.wizard li {
background-color: #E4E4E4;
border-radius: 5px;
display: inline;
padding: 10px 30px 10px 40px;
margin-right: -7px;
width: auto;
}
.wizard li::before, .wizard li::after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-color: transparent;
border-left-color: #fff;
border-radius: 10px;
}
.wizard li::before {
border-width: 25px;
margin-top: -16px;
margin-left: 84px;
}
.wizard li::after {
border-left-color: #E4E4E4;
border-width: 21px;
margin-top: -12px;
margin-left: 24px;
}
.wizard li.selected {
background-color: #FF4F65;
color: #fff;
}
.wizard li.selected::after {
border-left-color: #FF4F65;
}
.wizard li:last-child::after {
border-left-color: transparent;
}
I want to use this on a large site that does not use a normalize/reset. The component only seems to work when you use normalize.css. Is there any way that i can just use normalize.css on this component rather than an entire page?
If you inspect the element, you'll see that the font-family is causing the issue.
From normalize.css:
html {
font-family: sans-serif; /* i'm causing it */
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
So simply add some font-family to the .wizard li, like arial.
Check the codepen
Or if you're using some custom font, then you have to modify the values (border-width, margin-top, margin-left) for the pseudo elements (.wizard li::before and .wizard li::after).
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); }
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.