I am creating a dynamic table generator, and during testing, I found that the following generated HTML gives an unexpected layout in all browsers (Firefox, Chrome, IE)
<table>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
I am expecting a 2x3 table, with top corner merged with the left cell in middle row, and and the middle row right cell merged with the bottom right cell but instead i ended up with a 2X2 grid
side note, even if I provided a height on the css or the row/cell attribute; doesn't change layout of the resulting table.
p/s i don't intend to use this for layouts; i just will like to idiot proof my codes from unintended effects from weird layouts such as this
Edit:
Expected:
|------|-------|
| | |
| | |
| |-------|
| | |
| | |
|------| |
| | |
| | |
|------|-------|
Result:
|------|-------|
| | |
| | |
|------|-------|
| | |
| | |
|------|-------|
Edit 2:
added CSS
table {
border: 2px solid #000000;
padding: 10px;
}
td {
border: 2px solid #FF0000;
height: 100px;
width: 100px;
padding: 10px;
}
tr {
border: 2px solid #00FF00;
padding: 10px
}
I also tried:
<table>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
</tr>
<tr>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
</table>
Related
I have a table mark-up that looks like the below:
-----------------
| a | b | c | d |
-----------------
On a different breakpoint, I would like the 'd' cell to shift below and go full width.
-------------
| a | b | c |
-------------
| d |
-------------
Is this possible with css?
You could use a media query and flexbox to override the default table styles.
table {
border-collapse: collapse;
display: block;
}
tr {
display: flex;
flex-wrap: wrap;
}
td {
border: 1px solid #ddd;
display: inline;
flex: 1;
padding: 5px 10px;
text-align: center;
}
td.d {
flex: 3;
flex-basis: 100%;
}
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="d">D</td>
</tr>
</table>
I have tables like this:
------------------------------------------------
| product-name | icon | text |
------------------------------------------------
| product-info | icon | text |
------------------------------------------------
I want my cells to be flexible according to the last cell content:
------------------------------------------------
| product-name | ic | smt |
------------------------------------------------
| product-info | ic | smt |
------------------------------------------------
-------------------------------------------------
| product-name | icon | big-text |
-------------------------------------------------
| product-info, bla bla bla...| icon | text |
-------------------------------------------------
I tried this css:
table {
table-layout: fixed;
font-size: 12px;
width: 100%;
}
table td:nth-child(1) {
max-width: 70%;
}
table td:nth-child(2) {
width: 10%;
}
table td:nth-child(3) {
max-width: 20%;
}
I put table-layout:fixed, but I can't manage to make the max-width to work. And I don't know how to tell that the last cell is the one to determine the others size.
The product-info content can be very big and I applied an ellipsis it become too large.
The first thing to do is get rid of table-layout: fixed, because that does the opposite of what you want. For the rest, if you want tables to be flexible, don't try to force widths on them!
There's a little trick to make some table cells as wide as their content, while giving the remaining cells the rest of the remaining space: make their width 1px and make sure that they can't wrap by setting white-space: nowrap. Then the rest will come naturally.
table {
border: 1px outset;
width: 100%;
}
th, td {
border: 1px inset;
}
table td:nth-child(2),
table td:nth-child(3) {
white-space:nowrap;
width: 1px;
}
<table>
<tr>
<td>product-name</td>
<td>ic</td>
<td>smt</td>
</tr>
<tr>
<td>product-info</td>
<td>ic</td>
<td>smt</td>
</tr>
</table>
<br>
<table>
<tr>
<td>product-name</td>
<td>icon</td>
<td>big-text</td>
</tr>
<tr>
<td>product-info, bla bla bla...</td>
<td>ic</td>
<td>smt</td>
</tr>
</table>
Hope this is what you meant!
I have a table in my web page that I want to only have half borders.
Example:
The table that I have:
A | B | C
| |
A | B | C
| |
A | B | C
Note:
td { padding-bottom: 5%; }
td#B { border-left: 1px solid black; border-right: 1px solid black}
/* Assuming alphabets A , B and C are ids of each td */
The table that I want:
A | B | C
A | B | C
A | B | C
How can I achieve this?
I am using angularjs' ng-repeat to display the data from a json database for the table.
You can either use an extra border on tr or border-spacing .
The difference can be seen while a border or background is applied to table :
table {
/* demo purpose mainly */
float:left;
margin:1em;
background:lightgray;
box-shadow: 0 0 0 2px green;;
}
.bdtr {
border-collapse:collapse;
}
td {padding:0 1em;}
td + td {
border-left:1px solid;
}
.bdtr tr + tr{
border-top:1em lightgray solid; /* use background-color */
}
.bdtd {
border-spacing:0 1em;
margin:0 1em;
}
<table class="bdtr">
<caption>border on tr</caption>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
<table class="bdtd">
<caption> border-spacing</caption>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
Also, you can use transparent border and shadow to allow a non plain background on table or behind it :
.bdtr {
border-collapse: collapse;
}
td {
padding: 0 1em;
}
.bdtr.bis {
background: linear-gradient(60deg, gray, yellow, purple, pink, lime);
}
.bdtr.bis tr+tr {
border-top: 1em transparent solid;
}
.bdtr.bis tr td+td {
border: none;/* reset from previous demo */
box-shadow: inset 2px 0;
}
<table class="bdtr bis">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
A small table property can do the trick . Use this css in your table css:
table {
border-collapse: separate;
border-spacing: 0 2em;
}
Working snippet:
table {
border-collapse: separate;
border-spacing: 0 2em;
}
td {
border-right: 1px solid #000;
padding: 0 10px;
}
tr td:last-child {
border-right: 0px solid #000;
}
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Instead of applying the style to the td try to apply it to the tr
And remove the padding on the td
tr {
margin: 10px 0;
display: block;
}
I'm trying to do a table in HTML, and I have a problem. Don't know how to do what I'm going to explain:
Is there any possibility that I could convert a cell that is below/adjoined to another one that has long vertical text into a small square format without taking up the same long vertical text format from the cell right above it?
Here's the HTML document:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Marge Cells</title>
<link rel="stylesheet" type="text/css" href="dudas.css">
</head>
<body>
<table border="1px">
<tr>
<td>
</td>
<td class="Rotate-90">
corto
</td>
<td class="Rotate-90">
text muuuuy largo
</td>
</tr>
<tr>
<td>
Cuentas
</td>
<td>
11.2€
</td>
<td>
1€
</td>
</tr>
</table>
</body>
</html>
And here the CSS:
#charset "UTF-8";
.Rotate-90
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position:relative;
height: 15px;
width: 30 px;
}
table {
border-collapse: collapse;
}
Here's a picture of what I'm trying to achieve
--- new ---
Now i understand you..
.table-r {
border-collapse: collapse;
}
.table-r td {
width: 30px;
}
..table-r th {
padding: 5px 10px;
}
.table-r td {
text-align: center;
padding: 10px 5px;
border: 1px solid #ccc;
}
.table-r th.th-r {
height: 140px;
white-space: nowrap;
}
.table-r th.th-r > div {
transform: translate(25px, 51px) rotate(315deg);
width: 30px;
}
.table-r th.th-r > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.table-header-rotated th.row-header {
padding: 0 10px;
border-bottom: 1px solid #ccc;
}
<table class="table-r">
<thead>
<tr>
<th class="th-r">
<div><span>Header 1</span>
</div>
</th>
<th class="th-r">
<div><span>Header 2</span>
</div>
</th>
<th class="th-r">
<div><span>Header 3</span>
</div>
</th>
<th class="th-r">
<div><span>Header 4</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
--- old ---
Is this what you mean ?
.Rotate-90 {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: relative;
height: 15px;
width: 30 px;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<th rowspan="4" class="Rotate-90">text vertical</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
You have rowspan and colspan.
colspan does this:
+-------------------+
| 1 |
+-------------------+
| 3 | 4 | 7 | 8 |
+----+----+----+----+
| 9 | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 | 16 |
+----+----+----+----+
rowspan does this:
+----+----+----+----+
| 1 | 2 | 3 | 4 |
+ +----+----+----+
| | 4 | 7 | 8 |
+ +----+----+----+
| | 10 | 11 | 12 |
+ +----+----+----+
| | 14 | 15 | 16 |
+----+----+----+----+
Rowspan and Colspan combined:
+---------+----+----+
| 1 | 3 | 4 |
+ +----+----+
| | 7 | 8 |
+---------+----+----+
| 9 | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 | |
+----+----+----+----+
I'm having an Angular Js like this
function Ctrl($scope) {
$scope.gardens = [
{garden:'1', trees: ["a", "b", "c", "d"]},
{garden:'2', trees: ["e", "f", "g", "h"]},
{garden:'3', trees: ["i", "k", "l", "m"]}
];
}
Now I want to display it in an html table as follow:
|Garden|Tree|
|1 |
| |a |
| |b |
| |c |
...
|2 |
| |e |
| |f |
| |g |
I can do this manually with DOM but have no solution with AngularJS.
(What I tried on html code:
<table ng-app="" ng-controller="Ctrl">
<tr ng-repeat="garden in gardens">
<td>{{garden.garden}}</td>
</tr>
</table>
)
Please help!
Johnny
You can do like this:
http://jsfiddle.net/ffVeu/
This is a base, just use it to produce a prettier HTML ;)
HTML
<div ng-app>
<table ng-controller="Ctrl">
<tr>
<th>Garden</th>
<th>Tree</th>
</tr>
<tr ng-repeat="garden in gardens">
<td class="firstColumn">{{garden.garden}}</td>
<td>
<table>
<tr ng-repeat="tree in garden.trees"><td>
{{tree}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
CSS (ugly, just to show the result, do not use this...)
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet"
href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
.firstColumn{
vertical-align: top;
}
table, tr, td {
padding: 2px;
margin: 20px;
text-align: center;
}
th {
background-color: silver;
color: white;
font-weight: bold;
padding: 10px;
}
tr{
border: 1px solid silver;
}
tr tr{
border: none;
}