I want that the divider border between the table cells will be half of it's height
see preview pic:
Here is the fiddle link:
Fiddle link
#details_gdr {
height: 50px;
line-height: 25px !important;
margin-top: 3px;
}
#details_gdr tbody tr:not(:last-child) {
height: 25px;
border-bottom: 1px solid #D0E0EA;
}
#details_gdr tbody tr th:not(:last-child) {
border-right: 1px solid #D0E0EA;
}
#details_gdr tbody tr th {
width: 28px;
text-align: center !important;
}
here is your solution.
#details_gdr {
height: 50px;
line-height: 25px !important;
margin-top: 3px;
border-collapse: collapse;
}
#details_gdr tbody tr:not(:last-child) {
height: 25px;
border-bottom: 1px solid #D0E0EA;
font-size: 1.4em;
}
#details_gdr tbody tr:not(:last-child) th + th::before {
color: #D0E0EA;
content: '|';
font-size: 0.6em;
position: relative;
top: -2px;
left: -7px;
}
#details_gdr tbody tr th {
width: 28px;
text-align: center !important;
}
https://jsfiddle.net/p4ynsxt3/
you can use image at right side to be your divider like the following css:
background:url(line.png) bottom right no-repeat;
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 have problem with my table. This table is primary for phones. When I have phone vertical, table is not showing thread, but when I have phone horizontally, it shows correctly.
Can anybody help me to display this table correctly on phones when phone is vertically?
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
display: block;
width: 0px;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
Thank you for your response.
That's a simple fix. Remove clip: rect(0 0 0 0); and width: 0px;. Those lines hides the entire thead because the #media condition kicks in in portrait mode (narrower screen).
You might want to redo the entire #media section of your css - it's overall a bit weird. Maybe add a couple of details what you originally intended to do on narrow screens.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
display: block;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
Lets just remove thead position and display rules.
Now we can see the thead. The you can add the remaining styles.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 0px;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
I have an html file as inserted in the image file and i have to make the heading of it fixed and the rest table scrollable by using CSS.
I found the css to do that but my problem is that after inserting the css in html file the formatting for the header and data does not match .Suggest me whats wrong in my css my css is as following.
I want my formatting should not be disturbed only the header should be fixed up.
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
this is the image for html file i was not able to insert the source code of it.
add margin to table like jsfiddle.net/h5t98/
table
{
margin-top: 26px;
width: 138px;
}
.month
{
width: 79px;
}
.saving
{
width:49px;
}
I have given fixed column width you can change according to your max column width.
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">