ok so i have do the a table . The problem i facing is i want to know how to merge the row of my table ... anyone can help me or teach me on how to merge the row of my table ?? for example if my row1 and row2 below want to merge as one row, how do i merge it ? would be happy if someone can help me :) [ ps : can i merge the table by writing something in the style there ?? if can then how ??
below is my code :]
<html>
<head>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
<body>
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
</body>
</html>
use rowspan attribute on the <td> tag. for example. use <td rowspan="2">this row is two rows merged</td> you could find more resource about this in https://www.w3schools.com/TAGs/att_td_rowspan.asp
Related
I want to create a data grid without table using only div using html and css.
Doing this I am stuck on to making the header row fixed and a scrollbar in main body of the grid.
So far I have done this
.grid-body {
background: #eee;
width: 100%;
font-family: 'Segoe UI';
font-size: 0.9em;
}
.grid-body-main {
overflow: auto;
height: 100px;
}
.header-row {
width: 100%;
display: flex;
background: #ddd;
}
.header-cell {
width: 100%;
border-right: solid thin #444;
padding: 3px 10px;
font-size: 1em;
min-width: 150px;
}
.default-row {
display: flex;
}
.default-cell {
width: 100%;
border-right: dotted thin #444;
padding: 3px 10px;
min-width: 150px;
word-wrap: break-word;
}
<div class="grid-body">
<div class="header-row">
<div class="header-cell">
ID
</div>
<div class="header-cell">
Name
</div>
<div class="header-cell">
Username
</div>
<div class="header-cell">
Email
</div>
</div>
<div class="grid-body-main">
<div class="default-row">
<div class="default-cell">
1
</div>
<div class="default-cell">
Aman
</div>
<div class="default-cell">
amansinghgusain
</div>
<div class="default-cell">
amansinghgusain#gmail.com
</div>
</div>
<div class="default-row">
<div class="default-cell">
2
</div>
<div class="default-cell">
Jon Doe
</div>
<div class="default-cell">
jondoe
</div>
<div class="default-cell">
jondoe#gmail.com
</div>
</div>
<div class="default-row">
<div class="default-cell">
2
</div>
<div class="default-cell">
Jon Doe
</div>
<div class="default-cell">
jondoe
</div>
<div class="default-cell">
jondoe#gmail.com
</div>
</div>
<div class="default-row">
<div class="default-cell">
2
</div>
<div class="default-cell">
Jon Doe
</div>
<div class="default-cell">
jondoe
</div>
<div class="default-cell">
jondoe#gmail.com
</div>
</div>
</div>
</div>
Problem
When vertical scrollbar appears, it covers a certain width which in
turn gets deducted from grid-body-main which creates difference in
header row and body row as clearly visible in this Plunkr.
Workaround
I want my grid to look like this, but not using table
Any help regarding this would be appreciable.
Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands
Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data.
Solutions: Only using div is it possible to make this accessible?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
<title>Div Table Example</title>
</head>
<body>
<div class="Table" role = "grid" aria-readonly="true">
<div class="Title">
<p>Example</p>
</div>
<div class="Heading" role = "columnheader">
<div class="Cell">
<p>Name</p>
</div>
<div class="Cell" role = "columnheader">
<p>Symbol</p>
</div>
<div class="Cell" role = "columnheader">
<p>Quantity</p>
</div>
</div>
<div class="Row" role = "row">
<div class="Cell" role = "gridcell">
<p>Bank of America corp</p>
</div>
<div class="Cell" role = "gridcell">
<p>BAC</p>
</div>
<div class="Cell" role = "gridcell">
<p>139.00</p>
</div>
</div>
<div class="Row" role = "row"">
<div class="Cell" role = "gridcell">
<p>Ebay Inc</p>
</div>
<div class="Cell" role = "gridcell">
<p>Ebay</p>
</div>
<div class="Cell" role = "gridcell">
<p>12.00</p>
</div>
</div>
</div>
</body>
</html>
I don't know if this will actually work considering these roles are intended for real tables. Using an actual table would be a much better idea.
Anyway, your roles could be improved.
Looks like your columnheader context is wrong. The header row should use the row role:
<div class="Heading" role="row">
<div class="Cell">
<p>Name</p>
</div>
<div class="Cell" role="columnheader">
<p>Symbol</p>
</div>
<div class="Cell" role="columnheader">
<p>Quantity</p>
</div>
</div>
See: http://rawgit.com/w3c/aria/master/aria/aria.html#columnheader
Also, if this 'table' is not interactive you should use role="table", not role="grid". See note: http://rawgit.com/w3c/aria/master/aria/aria.html#grid
If the reason for the 'div table' is that you need a responsive table, see: https://css-tricks.com/responsive-data-tables/
I've added ARIA attributes to the code so screen reader could read it properly.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-header-group;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
<title>Div Table Example</title>
</head>
<body>
<div class="Table" role="grid" aria-readonly="true">
<div class="Title">
<p>Example</p>
</div>
<div class="Heading" role="row">
<div class="Cell" role="columnheader" id="a1">
<p>Name</p>
</div>
<div class="Cell" role="columnheader" id="a2">
<p>Symbol</p>
</div>
<div class="Cell" role="columnheader" id="a3">
<p>Quantity</p>
</div>
</div> <div class="Row" role="row">
<div class="Cell" role="gridcell" aria-labelledby="a1">
<p>Bank of America corp</p>
</div>
<div class="Cell" role="gridcell" aria-labelledby="a2">
<p>BAC</p>
</div>
<div class="Cell" role="gridcell" aria-labelledby="a3">
<p>139.00</p>
</div>
</div>
<div class="Row" role="row">
<div class="Cell" role="gridcell" aria-labelledby="a1">
<p>Ebay Inc</p>
</div>
<div class="Cell" role="gridcell" aria-labelledby="a2">
<p>Ebay</p>
</div>
<div class="Cell" role="gridcell" aria-labelledby="a3">
<p>12.00</p>
</div>
</div>
</div>
</body>
</html>
I am trying to create a simple table which should truncate text with ellipses if it overflows the width.
However it seems the width is not being applied. Please see this in action:
Table width jsfiddle
Also copying the code here:
EDIT: added header and a div wrapper around all rows, which is not working with fixed layout
<div>
<div class="table">
<div class="row">
<div class="cell">
header
</div>
<div class="cell">
123
</div>
<div class="cell">
456
</div>
<div class="cell">
789
</div>
<div class="cell">
110
</div>
</div>
<div>
<div class="row">
<div class="cell">
This is a very long line of text that should be trimmed
</div>
<div class="cell">
123
</div>
<div class="cell">
456
</div>
<div class="cell">
789
</div>
<div class="cell">
110
</div>
</div>
<div class="row">
<div class="cell">
This is a very long line of text that should be trimmed
</div>
<div class="cell">
123
</div>
<div class="cell">
456
</div>
<div class="cell">
789
</div>
<div class="cell">
110
</div>
</div>
</div>
</div>
</div>
CSS
.table {
display:table;
table-layout: fixed;
width: 100%
}
.row {
display: table-row
}
.cell {
display: table-cell;
width: 20%;
white-space: nowrap;
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
Please suggest. Thanks.
You need to add table-layout:fixed; and width:100%; to your table CSS:
.table {
display:table;
table-layout:fixed;
width:100%;
}
jsFiddle example
.table {
display:table;
table-layout:fixed;
width:100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 20%;
white-space: nowrap;
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="table">
<div class="row">
<div class="cell">This is a very long line of text that should be trimmed</div>
<div class="cell">123</div>
<div class="cell">456</div>
<div class="cell">789</div>
<div class="cell">110</div>
</div>
<div class="row">
<div class="cell">This is a very long line of text that should be trimmed</div>
<div class="cell">123</div>
<div class="cell">456</div>
<div class="cell">789</div>
<div class="cell">110</div>
</div>
</div>
You could set it to a specific px width:
.cell { max-width: 20px; } //Hard-coded width
I wonder if you can do without the display:table-cell
I tried this and it seemed to work
.cell {
display:inline-block;
width: 20% !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Hello,
I am newbie on CSS, and I am going to design a pricing table with div(table-less). I use below css. My main problem is customized space between columns and rows.
When I add "border-spacing" four sides of cell would have border. But As you can see in picture I need different space on each side of cells.
For example border space on top and bottom 0, border space on left and right 10px. But I can not find any solution.
css style:
.Table{
display: table;
}
.Title{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row{
display: table-row;
}
.Cell{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.Full_width{
width: 100%;
}
.No_border{
border: none;
}
.mostpopular_tag{
background-color:#F25050;
color: #fff;
}
.pricing_table_header{
line-height: 21px;
background-color: #181818;
color: #fff;
}
And Table HTML structure is like below:
<div class="Table full_width">
<div class="Row">
<div class="Cell No_border">
<p></p>
</div>
<div class="Cell No_border mostpopular_tag">
<p>Most Popular</p>
</div>
<div class="Cell No_border">
<p></p>
</div>
</div>
<div class="Heading ">
<div class="Cell No_border pricing_table_header">
<p>Heading 1</p>
</div>
<div class="Cell No_border pricing_table_header">
<p>Heading 2</p>
</div>
<div class="Cell No_border pricing_table_header">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell No_border">
<p>Row 1 Column 1</p>
</div>
<div class="Cell No_border">
<p>Row 1 Column 2</p>
</div>
<div class="Cell No_border">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell No_border">
<p>Row 2 Column 1</p>
</div>
<div class="Cell No_border">
<p>Row 2 Column 2</p>
</div>
<div class="Cell No_border">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
This is demo of my table: http://jsfiddle.net/2rFfL/
The border, margin, and padding properties have different versions for "all over" versus "each side"
So, border could be done like this:
border-width: 3px;
Or it can be done like this (first number is top, second right, third bottom, fourth left):
border-width: 3px 5px 2px 10px;
Or, you can specify each like this:
border-top-width: 3px;
border-right-width: 5px;
border-bottom-width: 2px;
border-left-width: 10px;
border-spacing accepts two values. If you supply both values, as in border-spacing: 10px 0;, then the first applies horizontally and the second vertically.
http://www.w3schools.com/cssref/pr_border-spacing.asp
Edit: http://jsfiddle.net/2rFfL/1/
Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?
<div class="table">
<div class="row">
<div class="cell">
<h3>Heading 1</h3>
<hr />
<div class="row">
<div class="cell">Label 1</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<div class="row">
<div class="cell">Label 2 with much more Text</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<br />
<h3>Heading 2</h3>
<hr />
<div class="row">
<div class="cell">Label 3 with Text</div>
<div class="cell">Html.TextBoxFor(...)</div>
</div>
</div>
<div class="cell">
...
</div>
</div>
</div>
CSS:
div .table {
display: table;
width: 100%;
}
div .cell {
display: table-cell;
padding: 0.3em;
}
div .row {
display: table-row;
}
It should actually look more like this (red line):
Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.
You could simply add a width to the first column:
.row .cell .row .cell:first-child{
width:200px;
}
Demo Fiddle