How can I keep this table in a box?

How can I keep this table in a box? - html

If you run the snippet below you'll see a table that overflows on both axes. What I would like is to put this in a box so you can see the horizontal and vertical scroll bars all the time. This box should also scale with the page if the window's size is altered. Essentially this would be like looking at a Microsoft Excel spreadsheet where there is a consistent border between the window's edge and the table border and you can see the scroll bars all the time. How can I do this?
.sidebar {
position: fixed;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: #aaa;
top: 0px;
bottom: 0px;
left: 0px;
width: 100px;
}
.main {
margin-left:100px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="sidebar">
<div>
<p>Fixed Sidebar</p>
</div>
</div>
<div class="main">
<div class="row">
<p>Some content above table</p>
</div>
<div class="table-responsive">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
<th>
Column 4
</th>
<th>
Column 5
</th>
<th>
Column 6
</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
some really really really really long piece of data that's going to make my table overflow on the x-axis
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
<tr>
<td nowrap>
data 1
</td>
<td nowrap>
data 2
</td>
<td nowrap>
data 3
</td>
<td nowrap>
data 4
</td>
<td nowrap>
data 5
</td>
<td nowrap>
data 6
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

is this what you want?
Add such style for your table-responsive class
.table-responsive {
overflow-x: scroll;
overflow-y: scroll;
width:100%;
height:100%;}
https://jsfiddle.net/puorqt13/

I ended up solving it as follows:
.sidebar {
position: fixed;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: #aaa;
top: 0px;
bottom: 0px;
left: 0px;
width: 100px;
}
.main {
margin-left:100px;
}
.table-viewport {
position:absolute;
top: 50px;
bottom: 15px;
left: 115px;
right: 15px;
overflow-y: scroll;
border: 1px solid #aaa;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="sidebar">
<div>
<p>Fixed Sidebar</p>
</div>
</div>
<div class="main">
<div class="row">
<p>Some content above table</p>
</div>
<div class="table-viewport">
<table class="table table-bordered table-condensed">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>some really really really really long piece of data that's going to make my table overflow on the x-axis</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
<tr>
<td nowrap>data 1</td>
<td nowrap>data 2</td>
<td nowrap>data 3</td>
<td nowrap>data 4</td>
<td nowrap>data 5</td>
<td nowrap>data 6</td>
</tr>
</table>
</div>
</div>
</div>
</body>

Related

How to put table in a table?

I need to make a table with more tables, but i dont know how to put this tables inside
It should look like this
i need to do this without CSS
I have tried something...well it turns out like this
I don't understand how to make it

This is a HTML lesson for tables as well as colspan and rowspan attributes:
<body>
<table>
<td>spaltenweise</td>
<td>
<table>
<td colspan="4">A04_03a</td>
<tr>
<td>Spale 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
<td>Spalte 4</td>
</tr>
<tr>
<td colspan="4">Spalte 1+2+3+4</td>
</tr>
</table>
</td>
<td>
<table>
<td colspan="4">A04_03b</td>
<tr>
<td>Spale 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
<td>Spalte 4</td>
</tr>
<tr>
<td colspan="2">Spalte 1+2</td>
<td colspan="2">Spalte 3+4</td>
</tr>
</table>
</td>
<td>
<table>
<td colspan="4">A04_03c</td>
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
<td>Spalte 4</td>
</tr>
<tr>
<td colspan="1">Spalte 1</td>
<td colspan="3">Spalte 2+3+4</td>
</tr>
</table>
</td>
<tr>
<td>zeilenweise</td>
<td>
<table>
<tr colspan="3">A04_03d</tr>
<tr>
<td>Zeile 1</td>
<td rowspan="4">Zeile 1+2+3+4</td>
</tr>
<tr>
<td>Zeile 2</td>
</tr>
<tr>
<td>Zeile 3</td>
</tr>
<tr>
<td>Zeile 4</td>
</tr>
</table>
</td>
<td>
<table>
<tr colspan="3">A04_03e</tr>
<tr>
<td>Zeile 1</td>
<td rowspan="2">Zeile 2+3</td>
</tr>
<tr>
<td>Zeile 2</td>
</tr>
<tr colspan="3"></tr>
<tr>
<td>Zeile 3</td>
<td rowspan="2">Zeile 2+3</td>
</tr>
<tr>
<td>Zeile 4</td>
</tr>
</table>
</td>
<td>
<table>
<tr colspan="3">A04_03f</tr>
<tr>
<td>Zeile 1</td>
<td>1</td>
</tr>
<tr>
<td>Zeile 1</td>
<td rowspan="3">Zeile 2+3+4</td>
</tr>
<tr>
<td>Zeile 3</td>
</tr>
<tr>
<td>Zeile 4</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

<table>
<tr>
<td style="border:1px solid black;">
Spaltenweise
</td>
<td style="border:1px solid black;">
<table>
<tr>
<td style="border:1px solid black;">
A04
</td>
</tr>
<tr>
<td style="border:1px solid black;">
100
</td>
<td style="border:1px solid black;">
200
</td>
<td style="border:1px solid black;">
300
</td>
</tr>
<tr >
<td colspan=3 style="border:1px solid black;">
spalte 1 2 3 4
</td>
</tr>
</table>
</td>
</tr>
</table>

I need to separate the 2 rows on the right (2018 and 2017) so there is some whitespace. Having alot of trouble

I have a table that on the right has 2 Columns (2018 and 2017) with numbers underneath. I'm trying to separate those columns and have them separated by a white column with the border going to the end.I've added the html, I also have css but I'm just having a hard time separating while keeping the borders.
<table class="table">
<tbody>
<tr>
<td class="table-head-text top-table-text">Assets</td>
<td class="table-year-1 bold">2018</td>
<td class="table-year-2 bold">2017</td>
</tr>
<tr>
<td>Cash & Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 & $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises & Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text">Liabilities & Capital Funds</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing<br />
Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold">$2,857,311</td>
<td class="table-year-2 bold">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1">$22,497</td>
<td class="table-year-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase & Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold">$2,879,808</td>
<td class="table-year-2 bold ">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text">Capital Accounts</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Proﬁts</td>
<td class="table-year-1">$188,173</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss) Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold">$276,232</td>
<td class="table-year-2 bold">$253,898</td>
</tr>
<tr>
<td class="table-head-text bk">Total Liabilities & Capital Accounts</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr class="tr-border-top">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
This is the example I'm trying to get to

You can try this code:
<table class="table">
<thead>
<tr>
<th width="70%" class="table-head-text top-table-text">Assets</td>
<th width="15%" class="table-year-1 bold">2018</td>
<th width="15%" class="table-year-2 bold">2017</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cash & Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 & $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises & Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text">Liabilities & Capital Funds</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing<br />
Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold">$2,857,311</td>
<td class="table-year-2 bold">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1">$22,497</td>
<td class="table-year-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase & Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold">$2,879,808</td>
<td class="table-year-2 bold ">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text">Capital Accounts</td>
<td class="table-year-1"> </td>
<td class="table-year-2"> </td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Proﬁts</td>
<td class="table-year-1">$188,173</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss) Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold">$276,232</td>
<td class="table-year-2 bold">$253,898</td>
</tr>
<tr>
<td class="table-head-text bk">Total Liabilities & Capital Accounts</td>
<td class="table-year-1 bold">$3,156,040</td>
<td class="table-year-2 bold">$2,883,123</td>
</tr>
<tr class="tr-border-top">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
table thead tr th:last-child{
display:table;
margin-left:90px
}
table tbody tr td:last-child{
display:table;
margin-left:90px
}

Change row background in HTML table depending on the value of the first column

This is my part of a table (with a number of rows that I don't know before I generate the table) that an external script creates:
<table id='testTable'><thead>
<tr>
<th align="center">Header 1</th>
<th align="center">Header 2</th>
<th align="center">Header 3</th>
<th align="center">Header 4</th>
<th align="center">Header 5</th>
<th align="center">Header 6</th>
<th align="center">Header 7</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">AAAA</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">AAAA</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">BBBB</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">BBBB</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
<tr>
<td align="center">CCCC</td>
<td align="center">Field 1</td>
<td align="center">Field 2</td>
<td align="center">Field 3</td>
<td align="center">Field 4</td>
<td align="center">Field 5</td>
<td align="center">Field 1</td>
</tr>
I would like to change the background colors for alternate rows using 2 colors (grey and white, for example) considering the value of the first as the key. In the data above, it would be something like:
1st row --> white
2nd row --> grey
3rd row --> grey (because the key is still "BBBB")
4th row --> white
I checked another example but I was not able to use it, so it would be great to have step-by-step indications to edit the html or the CSS that I use to style the table (if necessary, I can post the content of the CSS too).

HTML Table not displaying properly

Hey guys I was creating this table table recently in HTML.
image:http://imgur.com/wPXCwrd
The table (shown in image) created perfectly but a weird blank row was created (marked red in image). When I tried to delete that code the entire cells below the QUESTIONS row gets shifted (image link:http://imgur.com/jBfmNGV).
How do I remove that blank cell after MEN cell?
CODE:
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>

Just remove the :
<td> </td>
so your final code will be :
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Preview: https://jsfiddle.net/3q6n9v7k/

A more correct answer would be the changing the rowspan and colspan.
Instead of
<tr>
<td rowspan="3">QUESTIONS</td> //
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
Do this
<tr>
<td rowspan="2">QUESTIONS</td>
<td colspan="2" rowspan="1">WOMEN</td>
<td colspan="2" rowspan="1">MEN</td>
</tr>
Also remove :
<tr>
<td> </td>
</tr>
check out Fiddle

HTML Tables info

I was wondering if there was any way to make tables in html to look exactly like this:
http://i43.tinypic.com/21dml8l.png
I basicly need 1 big cell, in first column, and then 9 cells in second column.
Is that possible to do?

Yes, first row (<tr>) has one <td> with rowspan=9, and then 8 other rows (<tr>) with one simple <td>.

<table>
<tr>
<td rowspan="9">
Cell
</td>
<td>
Cell 1
</td>
</tr>
<tr>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
Cell 3
</td>
</tr>
<tr>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
</tr>
<tr>
<td>
Cell 6
</td>
</tr>
<tr>
<td>
Cell 7
</td>
</tr>
<tr>
<td>
Cell 8
</td>
</tr>
<tr>
<td>
Cell 9
</td>
</tr>
</table>

Based off PizzaPill's answer, and CyberDude's explanation, you should have:
<table>
<tr>
<td rowspan="9">Cell</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
</tr>
<tr>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
</tr>
</tr>
</table>
http://jsfiddle.net/YuG26/1/
Remember to have 2 <td>'s in the first row and one in the following rows. You can add your styling as you wish.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How can I keep this table in a box? - html

is this what you want? Add such style for your table-responsive class .table-responsive { overflow-x: scroll; overflow-y: scroll; width:100%; height:100%;} https://jsfiddle.net/puorqt13/

Related

How to put table in a table?

I need to separate the 2 rows on the right (2018 and 2017) so there is some whitespace. Having alot of trouble

Change row background in HTML table depending on the value of the first column

HTML Table not displaying properly

HTML Tables info

Categories

Resources