I am trying to generate tables with random sizes, such as n * n where n can be between 3 to 7. The tables should be reponsive and should fit wholly on any device screen.
Problem:
When the table is generated all the cells are squeezed up and if I add data into the any cell, other cells squeeze up while that particular cell expands.
What I want:
I want all the cells to be responsive and square in shape too. By square I mean when the table is generated, each cell should be width = height. And the table as whole should nicely fit the viewport.
What I did:
I used a bit of JS to make each cell reponsive but on larger screens each cell turned out to be huge, resulting in a huge table, which overflows the height of the viewport.
HTML
<body>
<div class="site-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
</nav>
<!--<div class="centerMe">-->
<div class="container">
<table id="board" class="table table-bordered">
<tr>
<td data-cell="0"></td>
<td data-cell="1"></td>
<td data-cell="2"></td>
</tr>
<tr>
<td data-cell="3"></td>
<td data-cell="4"></td>
<td data-cell="5"></td>
</tr>
<tr>
<td data-cell="6"></td>
<td data-cell="7"></td>
<td data-cell="8"></td>
</tr>
</table>
</div>
<!--</div>-->
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
/*$(document).ready(function() {
function resizetable() {
var newBoxHeight= $('td').outerWidth();
$('td').outerHeight(newBoxHeight);
}
resizetable();
$(window).resize(function () {
resizetable();
});
});*/
</script>
</body>
CSS
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}
.centerMe {
position: relative;
top: 50%;
transform: translateY(-60%);
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
}
#board, #board td {
border: none;
}
#board td:nth-child(2n + 1) {
border-left: 1px solid black;
border-right: 1px solid black;
}
#board td:first-child {
border-left: none;
}
#board td:last-child {
border-right: none;
}
#board tr {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#board tr:first-child {
border-top: none;
}
#board tr:last-child {
border-bottom: none;
}
#media (min-width: 768px) {
#board {
margin: 0 auto;
width: 70%;
}
}
NOTE: I am using twitter-bootstrap 3.
You want the table cells to be square and there are only three cells in each row. The width of each row is assigned to the height. It will obviously create huge boxes. If square boxes are not necessary, then you can set the height of the boxes manually so they do not look too big.
Related
I am arranging my CSS stylesheet for a responsive website, and some elements become hidden under a given screen width (please see the media query in CSS code).
The problem occurs when I have to hide a table column (th, td both identified by a class) for a certain table, whereas the layout of all my tables uses selectors such as last-of-type or last-child, without any class indication. Here, the class which is hidden is .teacher.
I can not make it work with attached CSS, the line I am struggling with is the following:
table.rounded thead th:last-of-type:not([style*='display: none'])
It's my first time so far using the not() selector, and as far as I know CSS is sometimes sensitive to spaces in the selector combination, so as I could spend much time trying to fix syntax whereas it is a misuse issue, or vice versa, I am requesting for support.
I'm looking for:
a way to fix the mistake(s) my combination of selectors, if any. Or
know why it wouldn't work in any way.
otherwise, find an alternative combination of selectors, even if it
is long.
In both cases, I don't want a solution using JS as I have the constraint of not using JS. If there is no solution to above, I will find a turnaround (additional class / IDs, font size/color, width, etc.).
body {
background-color: #ffffff;
/* White */
}
* {
font-family: palatino, verdana;
word-wrap: break-word;
}
em {
font-style: normal;
font-weight: bold;
}
strong {
/* bold by default */
}
p {
color: #000000;
/* Black */
}
.centered {
text-align: center;
}
th.hours,
td.hours {
width: 120px;
}
td.hours {
font-size: 0.9em;
}
th.teacher,
td.teacher {
min-width: 90px;
max-width: 130px;
}
td.teacher {
font-size: 0.9em;
}
/* Section */
section {
float: center;
border: solid black 1px;
background-color: blue;
padding: 5px;
-webkit-border-radius: 0px 0px 8px 8px;
/*Safari,Opera,Chrome*/
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
}
section p {
color: #000000;
/* Black */
font-size: 1em;
}
section table {
float: center;
max-width: 90%;
margin: auto;
border-collapse: collapse;
/* does not work with property Radius */
border-spacing: 0px;
}
section table th {
background-color: silver;
/*gray*/
}
section table td {
background-color: #ffffff;
/* White */
}
section table th,
section table td {
color: #000000;
/* Black */
font-size: 1em;
margin: 5px 0px 3px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
vertical-align: middle;
text-align: left;
}
/* Table with rounded corners */
/* - borders */
table.rounded {
border-collapse: separate;
}
table.rounded tr {
border: 0px;
}
table.rounded th,
table.rounded td {
border-top: 1px solid black;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid black;
}
table.rounded th:first-of-type,
table.rounded td:first-of-type {
border-left: 1px solid black;
}
table.rounded tr:last-of-type td {
border-bottom: 1px solid black;
}
table.rounded td.afterrowspan {
/* follows in next tr, after the tr including the td which has rowspan defined */
border-left: 0px;
}
/* - corners */
table.rounded thead th:first-of-type {
/* 10px 0 0 0 : Top Left, for table with min 2 columns */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
table.rounded thead th:last-of-type:not([style*='display: none']) {
/* 0 10px 0 0 : Top Right, for table with min 2 columns */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
table.rounded tbody tr:last-child td:last-child {
/* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
/* tr:last-child td:last-child because tr:last-of-type td:last-of-type doesn't work with IE */
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:first-of-type {
/* 0 0 0 10px : Bottom Left, for table with min 2 columns */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* Mobile - or thin screens - specificities */
#media (max-width: 600px) {
section {
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
section table th,
section table td {
font-size: 0.80em;
}
th.hours,
td.hours {
width: 105px;
}
td.hours {
font-size: 0.80em;
}
th.teacher,
td.teacher {
display: none;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="style.css">
<title>Courses</title>
</head>
<body>
<section class="element_2">
<p class="centered">
<table class="rounded">
<thead>
<tr>
<th class="centered">Day</th>
<th class="centered hours">Hours</th>
<th class="centered">Course</th>
<th class="centered teacher">Teacher</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centered" rowspan="3"><strong>Monday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:00</td>
<td><em>How to climb a building</em> (beginners)</td>
<td class="teacher" rowspan="3">The Amazing Spiderman</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:00 - 21:00</td>
<td><em>How to fall from a building's wall</em> (beginners)</td>
</tr>
<tr>
<td class="centered hours afterrowspan">21:00 - 22:00</td>
<td><em>How to climb a building</em> (experienced)</td>
</tr>
<tr>
<td class="centered" rowspan="2"><strong>Thursday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:30</td>
<td><em>How to stay calm</em> (beginners)</td>
<td class="teacher" rowspan="2">The Incredible Hulk</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:30 - 22:00</td>
<td><em>How to stay calm</em> (experienced)</td>
</tr>
<tr>
<td class="centered"><strong>Friday</strong></td>
<td class="centered hours">19:00 - 22:00</td>
<td colspan=2>Description of various events in a loooooooooooonger text. Longer than that. About this long.</td>
</tr>
</tbody>
</table>
</p>
</section>
</body>
</html>
I'm very new at this, so sorry if my code is a little messy. I'm trying to create a job search page where the results will show a bar like this:
I've kinda got it, except I can't get that divider in between the PREV, 1 to 100, and NEXT. Mine looks like this:
Here's my code:
HTML:
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
CSS:
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
I've tried making a results class for every link, but then I end up getting one big box and 3 little boxes around each link.
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
display:flex;
}
.results a {
color:#000;
text-decoration:none;
font-family:sans-serif;
}
.a, .c {
flex:1;
padding: 5px 0px;
text-align:center;
}
.b {
flex:2;
padding: 5px 0px;
text-align:center;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
}
<div class="results">
<div class="a"><a href="https://gregslist--farahgus10.repl.co/">< Prev<a/></div>
<div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
<div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
</div>
Maybe put this in very simple table. I think it should be good enough solution for your need.
Something like this JSFiddle
<table>
<tr>
<td>
Prev
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >Next</a>
</td>
</tr>
</table>
With CSS with base like this
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
Your case is simple enough, don't no fancy flexbox or anything.
.results {
color: black;
border: 1px solid lightgrey;
/* width: 300px; removed */
display: inline-block; /* Added */
/* padding:5px; moved to the children (<a>) */
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
/* Added */
a {
display: inline-block;
padding: 5px;
text-decoration: none;
}
/* giving the second child left and right border to mimic dividers */
.results>a:nth-child(2) {
border-right: 1px solid lightgrey;
border-left: 1px solid lightgrey;
}
<div class="results">
Prev
1 to 100 of 179
Next
</div>
Your closing tags on the <a> links are wrong. They should look like </a> with the slash before the a. Once you update those, you can place the <a> links into individual divs:
HTML:
<div id="container">
<div>Prev</div>
<div>1 to 100 of 179</div>
<div>Next</div>
</div>
CSS:
div {
float: left;
}
#container {
border: 1px solid lightgrey;
}
#container div {
padding: 8px 24px;
border-right: 1px solid lightgrey;
}
#container div:last-child {
border-right: none;
}
There are many factors that are needed:
Your elements were badly closed
You need to be more specific to what elements you should apply the CSS
These are just the most notable, you need more CSS information. Much success.
.results {
display: flex;
width: 100%;
padding: 5px;
}
.results a {
max-width: 300px;
min-width: 150px;
color: black;
text-decoration: none;
border: 1px solid lightgrey;
padding: 8px;
text-align: center;
}
<div class="results">
Prev
<a href="#" >1 to 100 of 179</a>
<a href="#" >Next</a>
</div>
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
I have a table on the webpage which I am trying to make responsive(fit to the screen size) but unfortunately the table is going out of the screen in the mobile view for some reasons. The pictorial represenation of what I want in a mobile view is:
At this moment after inspection, I am able to get the following image in a mobile view (which is going out of the screen):
The div class = "section header single" points to the 1st ROW having the "Dependents" text. The HTML code for it is:
<div class="section header single">
<div class="inter">
<!-- ko i18n:'dependents' -->Dependents<!-- /ko -->
<div class="info header-sections" data-bind="popup: {
popupId: 'info-popup',
closeOnOutsideClick: true,
vm: {title: '', message: depend_info[locale.selected_locale()]}
}"></div>
</div>
</div>
The above image is in the inspect mode and in the mobile view(in between 320px and 767px) as well and it is going out of the screen which I am trying to resolve. The CSS(mobile view) and CSS(desktop view) which I am using for the above image are-
CSS Mobile View for the 1st row containing the text "Dependents":
#media screen and (max-width: 768px)
{
.default-body .section.header.single
{
background: none !important;
background-color:#656364 !important;
border: 1px solid #bfbfbf !important;
box-shadow: none !important;
top: 0 !important;
margin-top:0px !important;
}
}
.section.header
{
position: relative;
padding: 10px 0px !important;
width: 100%;
}
.section
{
height: auto;
display: table;
}
.default-body .section.header.single {
background: url(img/section-bg-BenPal.png) repeat-x scroll 0 0 #0359a6 !important;
border: 1px solid #bfbfbf !important;
box-shadow: none !important;
top: 0 !important;
margin-top: 40px !important;}
CSS Desktop View for the 1st row containing the text "Dependents":
.section.header.single {
top: 0;
}
.default-body .section.header {
background-color: #0a2f73;
border: 1px solid #0a2f73;
}
.section.header {
position: relative;
top: 20px;
padding: 10px 0px !important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
width: 100%;
}
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
My task is to make the entire table fit to the mobile screen. I have tried using width: auto or 100% but still the table is going out of the screen for some reasons. In the parent classes as well, I have changed the width to 100% or auto but still the table is going out of the screen.
In order to make the things more clear, I am including the HTML and CSS codes for the content beneath the "Dependents" text row:
The HTML code for the content beneath the Dependents row is:
<div class="section single">
<div class="inter">
<table cellspacing="0" cellpadding="0" class="table title">
<tbody><tr>
<td class="cell1"><!-- ko i18n:'dependents.name' -->Name<!-- /ko --></td>
<td class="cell2"><!-- ko i18n:'dependents.type' -->Type<!-- /ko --></td>
<td class="cell3"><!-- ko i18n:'dependents.status' -->Status<!-- /ko --></td>
<td class="cell4 last"></td>
</tr>
</tbody><tbody data-bind="foreach: dependents"></tbody>
</table>
<!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->
<table cellspacing="0" cellpadding="0" class="table">
<tbody><tr data-bind="css:{hidden: dependents().length != 0}" class=""><td colspan="3" class="cell-common"><!--ko i18n: 'dependents.no.dependent' -->There is no dependent registered in your file<!--/ko--></td></tr>
<tr>
<!-- ko if: showAddButton() --><!-- /ko -->
</tr>
</tbody></table>
<!-- /ko -->
</div>
</div>
The CSS code(Desktop view) for the content beneath the "Dependents" text row is:
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
.section {
border-top: 0;
border-left: 1px solid #aecaea;
border-right: 1px solid #aecaea;
border-bottom: 1px solid #aecaea;
box-shadow: 0 2px 3px #CCCCCC !important;
-moz-box-shadow: 0 2px 3px #CCCCCC !important;
-webkit-box-shadow: 0 2px 3px #CCCCCC !important;
background-color: #fff;
}
I am also including the snapshot of the webpage corresponding to above HTML and CSS codes::
The CSS code for the mobile view corresponding to the content beneath the "Dependents" text row is:
#media screen and (max-width: 767px) and (min-width: 320px)
.section.single {
margin-top: 0px;
background-color: #EBEBEB;
}
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
.section {
border-top: 0;
border-left: 1px solid #aecaea;
border-right: 1px solid #aecaea;
border-bottom: 1px solid #aecaea;
box-shadow: 0 2px 3px #CCCCCC !important;
-moz-box-shadow: 0 2px 3px #CCCCCC !important;
-webkit-box-shadow: 0 2px 3px #CCCCCC !important;
background-color: #fff;
}
I'm having some issues with lining up similarly sized divs inside a td Chrome inspector confirms pixel size is the same. Trying to do a scheduler demo. Any ideas how to fix the alignment issue would be great! thanks!
I'll admit the small picture doesn't look like much, but it's there and over the length of 24 hours, it's certainly looks off.
I've played with inspector for the last hour, but just can't find it!
My Html code snippet...
<table>
<tbody>
<tr>
<td class="text-right ">
<div class="time_label">6am</div>
<div class="time_label">7am</div>
<div class="time_label">8am</div>
<div class="time_label">9am</div>
<div class="time_label">10am</div>
<div class="time_label">11am</div>
<div class="time_label">12pm</div>
<div class="time_label">1pm</div>
<div class="time_label">2pm</div>
<div class="time_label">3pm</div>
<div class="time_label">4pm</div>
<div class="time_label">5pm</div>
<div class="time_label">6pm</div>
<div class="time_label">7pm</div>
<div class="time_label">8pm</div>
<div class="time_label">9pm</div>
</td>
<td class="area area1">
<div class="block block1"></div>
<div class="block block2"></div>
My Sass snippet, this is inside of a bootstrap row/col-md-12...
$booker-container-height: 618px;
$booker-table-margin: 10px;
$booker-height: $booker-container-height - $booker-table-margin;
.booker_wrapper {
box-shadow: 0 0 12px #888;
}
.booker {
table {
margin: $booker-table-margin;
height: $booker-height;
table-layout: fixed;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.time_label {
height: $booker-height/16;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.block {
height: $booker-height/32;
border-left: 1px solid #DDD;
}
.area:last-child{
border-right: 1px solid #DDD;
}
.area>.block:first-child
{
border-top: 1px solid #DDD;
}
.area>.block:nth-child(even)
{
border-bottom: 1px solid #DDD;
}
.area>.block:nth-child(odd)
{
border-bottom: 1px solid #DDD;
}
}
You should used the amazing css property box-sizing: border-box; supporting by IE8 to! Then set the height's items of left column at the double of the right and an border-bottom for each, like:
html:
<table>
<tr>
<th>
<div>Hello</div>
<div>Heros</div>
</th>
<td>
<div>World</div>
<div>Toto</div>
<div>Batman</div>
<div>Superman</div>
</td>
</tr>
</table>
scss:
* {
#include box-sizing(border-box);
}
$dark: #202020;
table {
border: 1px solid $dark;
border-bottom: 0;
}
th {
div {
height: 60px;
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
}
}
td {
div {
height: 30px;
border-bottom: 1px solid $dark;
}
}
I made a codepen here: http://codepen.io/pik_at/pen/qEKKBy
I have a simple page for a chat system.
Test page can be found here: http://komasurfer.com/chat-test/
Here's the code:
<html>
<head>
<style type="text/css">
#page-wrap {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
/*for sidebar*/
margin-right: -110px;
background-color: #AAAAFF;
}
#chat-wrap {
border: 1px solid #eee;
margin: 0 5px 10px 0;
float: left;
/*margin for sidebar*/
margin-right:115px;
border: 1px solid red;
background-color: #600000; }
#chat-area {
width:100%;
height: 400px;
border: 1px solid #666;
float: left;
}
#sidebar {
border: 1px solid green;
float: right;
width: 110px;
padding: 0px 0px 0px 5px;
}
#entry {
background-color: #ffffff;
padding: 5px;
font-size: 1em;
clear: both;
border: 3px solid #999;
height: 40px;
width: 97%; }
#entry-btn {
padding: 18px;
float: right; }
.left {float: left; }
.right {float: right; }
.c {clear: both; }
</style>
</head>
<body>
<div id="page-wrap">
<div id="sidebar">
SIDEBAR
</div>
<div id="chat-wrap">
<div id="chat-area">
<div id="loading">connecting to server...</div>
</div>
</div>
<div class="c"></div>
<form id="send-message-area">
<div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr><td align="left" width="98%" style="padding-right:5px;">
<textarea tabindex="1" maxlength="2000" id="entry"></textarea>
</td><td align="right">
<input id="entry-btn" type="button" value="Send">
</td></tr></tbody></table>
</div>
</form>
</div>
</body>
</html>
I've been trying for a very long time now to get the red box (with the contents of the chat) to expand to the sidebar.
If I add a width of 100% to that box, it always disregards the margin that I set for the sidebar and expands to the width of the container box.
How can I make the red chat area expand to the sidebar (minus a safety margin of 5 pixels)?
The layout is a floating one, so I cannot work with absolute measurements. And the sidebar should be 110 pixels.
Remove float:left from chat-wrap and increase the right margin like this:
#chat-wrap {
background-color: #600000;
border: 1px solid red;
margin: 0 136px 10px 0;
}