I am having a problem trying to scroll a table which has variable amount of rows and columns. I've tried to put overflow (auto AND scroll) and max height and width to both the div containing the table and the table itself. I copied the source of the code and my css class. If someone could help me I will appreciate it!
<div class="divCuotas">
<table class="tablaCuotas" cellpadding="1px" cellspacing="0">
<tr style="background-color: rgb(153, 153, 153);">
<td class="fullTableTD"colspan = "2">Comercio</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
<td class="fullTableTD">10/02/2010</td>
</tr>
<tr class = "dataTables">
<td rowspan="2">Fravega</td><td>Cuota</td>
<td>1/9</td>
<td>2/9</td>
<td>3/9</td>
<td>4/9</td>
<td>5/9</td>
<td>6/9</td>
<td>7/9</td>
<td>8/9</td>
<td>9/9</td>
<td>10/9</td>
<td>11/9</td>
<td>12/9</td>
<td>13/9</td>
<td>14/9</td>
<td>15/9</td>
<td>16/9</td>
<td>17/9</td>
<td>18/9</td>
</tr>
<tr class = "dataTables">
<td>$</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr class = "dataTables">
<td rowspan = "2">Garbarino</td>
<td>Cuota</td>
<td>1/2</td>
<td>2/2</td>
</tr>
<tr class = "dataTables">
<td>$</td>
<td>13</td>
<td>13</td>
</tr>
</table>
</div>
Here is the CSS:
.tablaCuotas{
line-height:15px;
overflow:scroll;
height:100px;
width:100px;
margin-bottom: 5px;
display: inline-table;
background-color:#ededed;
}
.divCuotas{
overflow:scroll;
height:100px;
width:100px;
font-weight:normal;
margin-bottom: 20px;
display: inline-table;
text-align:center;
}
The display:inline-table at the div is what is messing up your layout ..
Remove it and it will be fine..
You are turning the div to a table and tables do not allow scrolling ..
Put it in tbody
<tbody style="height:100px;overflow:scroll">
and check this http://www.imaputz.com/cssStuff/bigFourVersion.html
and this http://codylindley.com/blogstuff/css/pushpin/pushpin.html
Related
I am HTML/CSS beginner attempting to create calendar view very similar to Microsoft Outlook's design as shown below:
So far, I gotten the basic outline of the calendar with the following HTML/CSS:
<html>
<head>
<title>August, 2016</title>
</head>
<body>
<center><h1>August, 2016</h1></center>
<style>
table{
table-layout: fixed;
}
</style>
<table border="1" width="1250" height="800">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Claim Benefits<br>
Pick up groceries<br>
Iron the shirts<br>
+5 more...
</td>
</tr>
</table>
</td>
<td>2</td>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>
<table>
<tr>
<td>5</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Claim Benefits<br>
Pick up groceries<br>
Iron the shirts<br>
+5 more...
</td>
</tr>
</table>
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Which produces:
I want to accomplish some of the same things Outlook does:
The day of the month number should be on the top left corner of the cell. I attempted to create this with a table inside the cell but it doesn't quite feel or look right. I am directly attempting to recreate Outlook's view and the way they setup the day number and reminders below it.
Each of the cells should maintain the same size while containing up to 4 hyperlinks. In the above code, the cells of the row containing hyperlinks become bigger than the cells of the other rows. I want to fix the cell size such that all cells are the same size whether they contain up to 4 hyperlinks or not.
Thanks for any helpful code or suggestions.
An easy way to position/style the calendar numbers separately from the content is to make them td pseudo-elements. You could set the content to something like attr(data-day) to have it dynamically display a number set in the HTML.
To make sure the cells have the same height, just specify a height in the CSS. Since you only want "up to 4 hyperlinks", you can just check what the height is for a cell with 4 links and then use that.
By the way, it looks like there are a lot of errors with the tr tags in your code, and I would recommend representing the listed elements inside an individual day as a list rather than as nested tables (the calendar is tabular data, but the contents of the day are a to-do list).
Here's a snippet that includes the recommended changes:
table {
table-layout: fixed;
width: 1250px;
height: 800px;
}
table td {
height: 100px;
position: relative;
}
table td:before {
content: attr(data-day);
display: block;
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<center>
<h1>August, 2016</h1>
</center>
<table border="1">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td data-day="1">
<ul>
<li>Claim Benefits</li>
<li>Pick up groceries</li>
<li>Iron the shirts</li>
<li>+5 more...</li>
</ul>
</td>
<td data-day="2"></td>
</tr>
<tr>
<td data-day="3"></td>
<td data-day="4"></td>
<td data-day="5"></td>
<td data-day="6"></td>
<td data-day="7"></td>
<td data-day="8"></td>
<td data-day="9"></td>
</tr>
<tr>
<td data-day="10"></td>
<td data-day="11"></td>
<td data-day="12">
<ul>
<li>Claim Benefits</li>
<li>Pick up groceries</li>
<li>Iron the shirts</li>
<li>+5 more...</li>
</ul>
</td>
<td data-day="13"></td>
<td data-day="14"></td>
<td data-day="15"></td>
<td data-day="16"></td>
</tr>
<tr>
<td data-day="17"></td>
<td data-day="18"></td>
<td data-day="19"></td>
<td data-day="20"></td>
<td data-day="21"></td>
<td data-day="22"></td>
<td data-day="23"></td>
</tr>
<tr>
<td data-day="24"></td>
<td data-day="25"></td>
<td data-day="26"></td>
<td data-day="27"></td>
<td data-day="28"></td>
<td data-day="29"></td>
<td data-day="30"></td>
</tr>
<tr>
<td data-day="31"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I think You can add a flot:left; style to this month number, and maybe margin,padding:0;
I suggest to use min-height with the same value as height of all cells
First, you have not added any styling so you are leaving that up to the browser's defaults. Also, the center tag is deprecated. Use this instead:
h1 {text-align:center;}
For the table, you can add this to make the border appear like Outlooks' borders:
table, th, td {border-collapse: collapse;}
To style the table data remove the padding and margin. That should move the first td in the first tr to the top left corner.
Lastly, add a specific height to the row of each week. I would assign that tr a class of week and style with whatever height you want:
tr.week {height:200px;}
I have made a table with three columns, two with text and one with a picture. The table has 10 rows, so I gave the the cell with the picture a rowspan of 10. I am able to change the width of the picture, but for some odd reason the table-cell won't change it's width. The cell still have the width, the picture originally had.
I have tried setting the image to block, but that doesn't help with the td-width. I could give the td a class with a max-width, but I am looking for another solution.
example
HTML
<table>
<thead>
<tr><th colspan="2">Attribute</th></tr>
</thead>
<tbody>
<tr>
<td>Stufe</td>
<td>9</td>
<td rowspan="10"><img src="#"></img></td>
</tr>
<tr>
<td>Vitalität</td>
<td>12</td>
</tr>
<tr>
<td>Zauberei</td>
<td>10</td>
</tr>
<tr>
<td>Kondition</td>
<td>11</td>
</tr>
<tr>
<td>Belastung</td>
<td>15</td>
</tr>
<tr>
<td>Stärke</td>
<td>13</td>
</tr>
<tr>
<td>Geschicklichkeit</td>
<td>12</td>
</tr>
<tr>
<td>Intelligenz</td>
<td>9</td>
</tr>
<tr>
<td>Glaube</td>
<td>9</td>
</tr>
<tr>
<td>Glück</td>
<td>7</td>
</tr>
</tbody>
</table>
CSS (nothing special)
table {
font-size:90%;
margin:1.5em auto;
padding:0 1em;
border-collapse:collapse;
text-align:center;}
article table thead {
background:#91414B;}
article table th, main article table td {
padding:0.25em 0.5em;}
table img {
display:block;
width:50%;}
table a {
text-decoration:underline;
color:#FFFFFF;}
table a:hover {
text-decoration:none;
color:#C6C6C6;}
This question already has answers here:
HTML table with fixed headers?
(31 answers)
Closed 7 years ago.
I know how to make a fixed table-header a few different ways, however I'm looking for the best way, and I only want to use <table>,<thead>,<tbody>,<tr>,<th>,<td> tags which the HTML spec provides you.
Here is a dummy table structure:
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
Try this working demo. Below code:
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
border-collapse: separate;
border-spacing: 0 1px;
}
table thead {
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
tbody td,
thead th {
border-right: 1px solid transparent;
vertical-align: middle;
}
thead th {
height: 35px;
font-size: 16px;
text-align: left;
text-transform: uppercase;
}
tbody td {
text-align: left;
height: 30px;
background: #d5d5d5;
}
.table-cont {
width: 100%;
height: 350px;
}
<div class="table-cont">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
</div>
So I want to remove the extra spaces highlighted in red ink shown here:
http://i.stack.imgur.com/d7Kwo.png
When I remove the top images the table width becomes correct: 800px
but what I wanted is this:http://i.stack.imgur.com/XPsz2.jpg
Here is my current code:
<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
<tr>
<td colspan=3><img src="N13BANNER.PNG"></td>
<td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
<td style="width:176px"><img src="N13BUTTON1.PNG"></td>
<td width=176><img src="N13IMG5.jpg"></td>
<td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON2.PNG"></td>
<td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON3.PNG"></td>
<td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON4.PNG"></td>
<td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON5.PNG"></td>
<td width=176><img src="N13IMG6.jpg"></td>
</tr>
<tr>
<td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>
Code sample, with an update of your table layout without the images.
Is this how you want? ... then your images is to big, and pushes the cells too wide.
table {
width: 800px;
}
td {
background-color: gray;
width: 20%;
height: 85px;
}
tr:last-child td {
height: 40px;
}
img {
vertical-align: top;
}
<table>
<tr>
<td colspan=4></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan=3 rowspan=6></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>mail</td>
<td>mail</td>
</tr>
<tr>
<td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>
I have a HTML table correctly formatted the way I want it using the colspan element. What I also want however is for the elements that occupy multiple columns to have some kind of border or division at the column boundaries (within the spanned element). The purpose for this is to make it easy for the user to see how many columns a spanned element occupies.
For example if an element in a table occupies one row and 4 columns there could be three divisions within the element.
Thanks.
<div id="debug_con">
<h2>Debug Modes</h2>
<table class="debug">
<tr>
<th>Group Name</th>
<th>Width</th>
<th>Type</th>
<th>Group Address (dec)</th>
<th>Group Address (in HEX)</th>
<th>GPIO7</th>
<th>GPIO6</th>
<th>GPIO5</th>
<th>GPIO4</th>
<th>GPIO3</th>
<th>GPIO2</th>
<th>GPIO1</th>
<th>GPIO0</th>
</tr>
<tr class="W">
<td>debug_1</td>
<td>8</td>
<td>output</td>
<td>0</td>
<td>0x0</td>
<td class="col1" colspan="8">demod_out</td>
</tr>
<tr class="W">
<td>debug_2</td>
<td>8</td>
<td>output</td>
<td>1</td>
<td>0x1</td>
<td class="col1" colspan="8">afc_out</td>
</tr>
<tr class="R">
<td>debug_combo</td>
<td>8</td>
<td>input</td>
<td>2</td>
<td>0x2</td>
<td class="col1" colspan="4">this_upper</td>
<td class="col2" colspan="4">this_lower</td>
</tr>
<tr class="R">
<td>n_word</td>
<td>8</td>
<td>input</td>
<td>3</td>
<td>0x3</td>
<td class="col1" colspan="8">n_word</td>
</tr>
<tr class="W">
<td>write_combo</td>
<td>8</td>
<td>output</td>
<td>5</td>
<td>0x5</td>
<td class="unallocated" colspan="5">unallocated</td>
<td class="col1" colspan="1">Bit_2</td>
<td class="col2" colspan="1">Bit_1</td>
<td class="col1" colspan="1">Bit_0</td>
</tr>
<tr class="W">
<td>spi_debug</td>
<td>8</td>
<td>output</td>
<td>6</td>
<td>0x6</td>
<td class="unallocated" colspan="6">unallocated</td>
<td class="col1" colspan="1">spi_error</td>
<td class="col2" colspan="1">spi_flag</td>
</tr>
<tr class="W">
<td>OCL_GRP1</td>
<td>8</td>
<td>output</td>
<td>8</td>
<td>0x8</td>
<td class="unallocated" colspan="6">unallocated</td>
<td class="col1" colspan="1">ocl_dig_static_cal_meas_output_q</td>
<td class="col2" colspan="1">ocl_dig_static_cal_meas_output_i</td>
</tr>
<tr class="W">
<td>OCL_GRP2</td>
<td>8</td>
<td>output</td>
<td>9</td>
<td>0x9</td>
<td class="unallocated" colspan="1">unallocated</td>
<td class="col1" colspan="6">dig_ocl_controller_output_mag_i</td>
<td class="col2" colspan="1">dig_ocl_controller_output_sign_i</td>
</tr>
<tr class="W">
<td>OCL_GRP3</td>
<td>8</td>
<td>output</td>
<td>10</td>
<td>0xa</td>
<td class="unallocated" colspan="1">unallocated</td>
<td class="col1" colspan="6">dig_ocl_controller_output_mag_q</td>
<td class="col2" colspan="1">dig_ocl_controller_output_sign_q</td>
</tr>
<tr class="W">
<td>OCL_GRP4</td>
<td>8</td>
<td>output</td>
<td>11</td>
<td>0xb</td>
<td class="col1" colspan="3">oscl_sar_core_state_q</td>
<td class="col2" colspan="3">oscl_sar_core_state_i</td>
<td class="col1" colspan="1">ocl_static_cal_pga_calibration_ready_q</td>
<td class="col2" colspan="1">ocl_static_cal_pga_calibration_ready_i</td>
</tr>
<tr class="W">
<td>OCL_GRP5</td>
<td>8</td>
<td>output</td>
<td>12</td>
<td>0xc</td>
<td class="unallocated" colspan="2">unallocated</td>
<td class="col1" colspan="6">fsm_idac_input_code_i</td>
</tr>
<tr class="W">
<td>OCL_GRP6</td>
<td>8</td>
<td>output</td>
<td>13</td>
<td>0xd</td>
<td class="unallocated" colspan="2">unallocated</td>
<td class="col1" colspan="6">fsm_idac_input_code_q</td>
</tr>
.....etc.....
I am learning alot today jsfiddle is great! Ok I have a jsfiddle (thanks for the suggestion Alex) which shows how the table is currently being rendered. If you can see fsm_idac_input_code_i within the table for example, it is not obvious how many columns (GPIOs) the element occupies. If there were still some column borders within the element then the user could clearly see this without having to look at the color changes of adjacent cells or having to refer to the table header.
Very quick example - just to give an idea of what I meant.
Something like this, then you can style your divs as you wish - not sure is that what you need tho
<td class="col1" colspan="1">
<div>
spi_error
</div>
<div>
spi_error2
</div>
</td>
You can accomplish this without changing your existing layout.
This gives a red border to all cells that have a colspan greater than 1:
td[colspan] {
border: 2px solid red;
}
td, td[colspan="1"] {
border: 1px solid gray;
}
Fiddle 1
You could even show the colspan value when hovering over a cell:
td::before {
content: "1:";
position: absolute;
display: none;
left: 0;
top: 0em;
padding: 0.2em;
color: red;
}
td[colspan="2"]::before {content: "2:";}
td[colspan="3"]::before {content: "3:";}
td[colspan="4"]::before {content: "4:";}
td[colspan="5"]::before {content: "5:";}
td[colspan="6"]::before {content: "6:";}
td[colspan="7"]::before {content: "7:";}
td[colspan="8"]::before {content: "8:";}
td:hover {
padding-left: 1.5em;
}
td:hover::before {
display: block;
}
Fiddle 2