I added bootstrap to my page to solve a different problem, then I noticed that my table cells in another place had all collapsed:
How do I get the cells to auto size to their contents? I've seen posts about changing the width of cells, but I need to change their height back to their pre-bootstrap settings.
Here is my code:
.countdown_table {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.countdown_table tr td {
font-family: 'proxima-nova', sans-serif;
padding-right: 20px;
color: white;
text-align: center;
}
.units {
font-weight: 100;
text-transform: uppercase;
text-align: center;
}
.numbers {
font-size: 700%;
font-weight: 100;
letter-spacing: 0;
text-align: center;
background: #e18b35 !important;
font-family: 'proxima-nova', sans-serif;
color: white;
}
#secondElem {
width: 97px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="countdown_table" border="1">
<tr>
<td class="numbers" id="dayElem">04</td>
<td class="numbers">:</td>
<td class="numbers" id="hourElem">02</td>
<td class="numbers">:</td>
<td class="numbers" id="minuteElem">47</td>
<td class="numbers">:</td>
<td class="numbers" id="secondElem">04</td>
</tr>
<tr class="units">
<td>days</td>
<td></td>
<td>hours</td>
<td></td>
<td>minutes</td>
<td></td>
<td>seconds</td>
</tr>
</table>
Related
I have this tiny web page:
This is the source code:
<head>
<meta charset="UTF-8">
<style>
body {
margin-left: 20px;
margin-top: 20px;
}
h1 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h2 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h3 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h4 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h5 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h6 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
hr {
height: 3px;
border-radius: 2px;
border-width: 0;
color: lightgray;
background-color: lightgray;
}
.button {
display: inline-block;
background-color: darkgray;
color: white;
text-decoration: none;
border-radius: 2px;
padding: 6px;
margin-left: 2px;
margin-right: 2px;
}
.button:hover {
color: black;
}
.button:visited {
color: white;
}
.button:active {
color: white;
}
a {
color: gray;
}
</style>
</head>
<body nyxt-identifier="0">
<style nyxt-identifier="1">
body {
margin-left: 20px;
margin-top: 20px;
}
h1 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h2 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h3 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h4 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h5 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h6 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
hr {
height: 3px;
border-radius: 2px;
border-width: 0;
color: lightgray;
background-color: lightgray;
}
.button {
display: inline-block;
background-color: darkgray;
color: white;
text-decoration: none;
border-radius: 2px;
padding: 6px;
margin-left: 2px;
margin-right: 2px;
}
.button:hover {
color: black;
}
.button:visited {
color: white;
}
.button:active {
color: white;
}
a {
color: gray;
}
</style>
<h1 nyxt-identifier="2">Bindings</h1>
<p nyxt-identifier="3">
</p>
<div nyxt-identifier="4">
<h3 nyxt-identifier="5">override-map</h3>
<table nyxt-identifier="6">
<tbody nyxt-identifier="7">
<tr nyxt-identifier="8">
<td nyxt-identifier="9">C-S
</td>
<td nyxt-identifier="10">search-buffers
</td>
</tr>
<tr nyxt-identifier="11">
</td>
</tr>
</tbody>
</table>
</div>
<div nyxt-identifier="44">
<h3 nyxt-identifier="45">web-cua-map</h3>
<table nyxt-identifier="46">
<tbody nyxt-identifier="47">
<tr nyxt-identifier="48">
<td nyxt-identifier="49">f3
</td>
<td nyxt-identifier="50">search-buffer
</td>
</tr>
<tr nyxt-identifier="51">
</td>
</tr>
</tbody>
</table>
</div>
<div nyxt-identifier="195">
<h3 nyxt-identifier="196">base-cua-map</h3>
<table nyxt-identifier="197">
<tbody nyxt-identifier="198">
<tr nyxt-identifier="199">
<td nyxt-identifier="200">f5
</td>
<td nyxt-identifier="201">reload-current-buffer
</td>
</tr>
<tr nyxt-identifier="202">
</td>
</tr>
</tbody>
</table>
</div>
</body>
The code and image above are a simplification of the real problem. In the real problem, the page is way bigger because the table has more elements than the currently shown.
I would like to use the space in a better way so that printing it would not spend too much paper. There is a lot of space being wasted on the right side of the screen.
The content could be more widespread horizontally instead of only vertically.
Two feasible approaches to achieve this goal would be (i) reducing the font-size, and (ii) making the table be a 2 column-table or 3-column instead of 1-column.
OK. I can reduce the font-size with CSS:
tr { font-size: 10px}
Thus, I would like to ask:
1 - How to make the table be 3-column or 2-column table using CSS?
I tried this approach following the example on W3C:
table {
column-span: all;
}
But it did not work out.
2 - Would you have any suggestions beyond the font and column number tweak to maximize the use of space and reduce the use of paper?
This is not complicated at all. You just have to put all the key bindings and headings in one table instead of each in it's own. Then, we use a little bit of CSS to get a small border line between the table cells - just remove the CSS part if you don't want a border. Like this:
table {
border-spacing: 0;
}
td {
border: 1px solid black;
padding: 10px;
}
<h1>Bindings</h1>
<table>
<tbody>
<tr>
<td colspan="2">
override-map
</td>
<td colspan="2">
web-cua-map
</td>
<td colspan="2">
base-cua-map
</td>
</tr>
<tr>
<td>
C-S
</td>
<td>
search-buffers
</td>
<td>
F3
</td>
<td>
search-buffer
</td>
<td>
F5
</td>
<td>
reload-current-buffer
</td>
</tr>
</tbody>
</table>
I have table and inside this table button and textbox.
Here the code:
#dvStockCard{
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
}
.title {
font-size: small;
border-top: 2px solid #686868;
color:#383838;
padding: 8px calc(100% - 10ch) 0px 0px;
}
/*----table styles----*/
#dvStockCard table{
font-family: sans-serif;
font-weight: 600;
border-collapse: collapse;
width: 100%;
font-size: x-small;
}
#dvStockCard table tr{
border-bottom: 2px solid lightgray;
color: #707070;
}
#dvStockCard table td {
padding: 8px;
}
#dvStockCard table tr td:nth-child(2) {
text-align: right;
}
/*------values styles------*/
.val{
font-size: small;
color: black;
}
#lastPrice{
font-family: 'Palatino Linotype';
font-size: 160%;
color:black;
}
#change{
font-family: 'Palatino Linotype';
font-size: 160%;
color:green;
}
.halfWidth{
position: relative;;
width:50%;
}
/*-------helpers styles--------*/
.spaceTop-10{
margin-top:10px
}
.spaceBottom-10{
margin-bottom:10px
}
.fullWidth{
width:100%;
}
.fullHeight{
height:100%;
}
<div id="dvStockCard">
<div class="title spaceBottom-10">My data cart</div>
<table>
<tr>
<td id="lastPrice">no price</td>
<td id="change">1234324t</td>
</tr>
<tr>
<td>Range</td>
<td id="range" class="val">No Rnge</td>
</tr>
<tr>
<td>Open</td>
<td id="open" class="val">555</td>
</tr>
<tr>
<td>Volume</td>
<td id="volume" class="val">DM</td>
</tr>
<tr>
<td>Market Cap</td>
<td id="marketCap" class="val">Non</td>
</tr>
<tr>
<td></td>
<td id="timestamp">As of 12:00 AM</td>
</tr>
<tr>
<td style="width:50%;"><input type="text" class="fullWidth fullHeight"></td>
<td style="width:50%"><input type="button" value="Get" class="fullWidth fullHeight"></td>
</tr>
</table>
</div>
My question is how can I make a button and textbox inside the table cell in the table above to get the full height of the row(I tried height:100%)?
Couple of things:
You have already defined 8px of padding under #dvStockCard table td{...} that's why you had default padding for all. Considering you need that padding I have overridden the td padding for last row.
Use border-collapse: collapse; for the row and padding & margin to 0 for td. Now you can use your desired height for that row.
#dvStockCard {
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
}
.title {
font-size: small;
border-top: 2px solid #686868;
color: #383838;
padding: 8px calc(100% - 10ch) 0px 0px;
}
/*----table styles----*/
#dvStockCard table {
font-family: sans-serif;
font-weight: 600;
border-collapse: collapse;
width: 100%;
font-size: x-small;
}
#dvStockCard table tr {
border-bottom: 2px solid lightgray;
color: #707070;
}
#dvStockCard table td {
padding: 8px;
}
#dvStockCard table tr td:nth-child(2) {
text-align: right;
}
/*------values styles------*/
.val {
font-size: small;
color: black;
}
#lastPrice {
font-family: 'Palatino Linotype';
font-size: 160%;
color: black;
}
#change {
font-family: 'Palatino Linotype';
font-size: 160%;
color: green;
}
.halfWidth {
position: relative;
;
width: 50%;
}
/*-------helpers styles--------*/
.spaceTop-10 {
margin-top: 10px
}
.spaceBottom-10 {
margin-bottom: 10px
}
.trClass {
border-collapse: collapse;
}
.trClass td {
height: 40px;
padding: 0 !important;
/* need this because you already used 8px to the td*/
margin: 0 !important;
/* need this because you already used 8px to the td*/
}
.fullWidth {
width: 100%;
}
.fullHeight {
height: 100%;
}
<div id="dvStockCard">
<div class="title spaceBottom-10">My data cart</div>
<table>
<tr>
<td id="lastPrice">no price</td>
<td id="change">1234324t</td>
</tr>
<tr>
<td>Range</td>
<td id="range" class="val">No Rnge</td>
</tr>
<tr>
<td>Open</td>
<td id="open" class="val">555</td>
</tr>
<tr>
<td>Volume</td>
<td id="volume" class="val">DM</td>
</tr>
<tr>
<td>Market Cap</td>
<td id="marketCap" class="val">Non</td>
</tr>
<tr>
<td></td>
<td id="timestamp">As of 12:00 AM</td>
</tr>
<tr class="trClass">
<td style="width:50%;"><input type="text" class="fullWidth fullHeight"></td>
<td style="width:50%"><input type="button" value="Get" class="fullWidth fullHeight"></td>
</tr>
</table>
</div>
You could try wrapping it up in a container and later set it to 100% height. If not, you could try setting the height in px, you go trying different measurements until you see which one fills your desire. I hope I could help you
I made a table in html but when I try to increase the height of a table cell it doesn't increase.
this is the index.html file:
<!DOCTYPE html>
<!--Begin-->
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Cards</h1>
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
</table>
</body>
</html>
and here is the style.css file:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
This is how that looks:
But that isnt what I wanted because in the code I put rowspan="2" so here is an example of what I expected
But why is it that the first image is the result of this code and not the second?
You don't have a third row in your HTML code, that's why that cell doesn't span into a third row. As soon as you add a third row, the rowspan will look as expected:
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Cards</h1>
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
<tr>
<td>Row 3, second cell</td>
</tr>
</table>
</body>
</html>
I want to have a table that has the layout of a left floated cell a right floated cell and the middle cell to stay in the center.
Example:
Problem: When the data inside the middle cell increases it moves more to the left thus decreasing the margin I want between the cells.
Example:
Code:
.settings {
/*background: #636969;*/
width: 750px;
margin: 0 auto;
padding: 1em;
}
.settings h4 {
padding: 1em 0;
letter-spacing: 1px;
border-bottom: 1px solid #cacece;
}
.settings table {
width: 100%;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: 200;
}
.settings tr {
border-bottom: 1px solid #cacece;
}
.settings td {
padding: 0.5em 0;
}
.settings .edit {
text-align: right;
}
<!-- start settings -->
<div class='settings'>
<h4>Account Settings</h4>
<table class='options'>
<tr>
<td class='name username'>Name</td>
<td class='value'>Robert Rocha</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name email'>Email</td>
<td class='value'>unitedstatesofamerica#gmail.com</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name pword' colspan='2'>Password</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
</table>
</div>
<!-- end settings -->
Fiddle
simply add table-layout:fixed to your table
.settings {
/*background: #636969;*/
width: 750px;
margin: 0 auto;
padding: 1em;
}
.settings h4 {
padding: 1em 0;
letter-spacing: 1px;
border-bottom: 1px solid #cacece;
}
.settings table {
width: 100%;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: 200;
table-layout: fixed;
}
.settings tr {
border-bottom: 1px solid #cacece;
}
.settings td {
padding: 0.5em 0;
}
.settings .edit {
text-align: right;
}
<div class='settings'>
<h4>Account Settings</h4>
<table class='options'>
<tr>
<td class='name username'>Name</td>
<td class='value'>Robert Rocha</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name email'>Email</td>
<td class='value'>unitedstatesofamerica#gmail.com</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
<tr>
<td class='name pword' colspan='2'>Password</td>
<td class='edit'><a href='#'>Edit</a>
</td>
</tr>
</table>
</div>
you can set a fixed width for the first column:
.name { width: 100px; }
see here: https://jsfiddle.net/dojprwzL/
You've already done it for your edit column by doing so:
.settings .edit {
text-align: right;
}
This puts the content in your edit column straight to the right hand side. What you need to do is just to add the same rule for your other columns, obviously replacing right through left and center. That being said your styling would look somehow like this:
.settings .name {
text-align: left;
}
.settings .value {
text-align: center;
}
.settings .edit {
text-align: right;
}
A live example can be seen here.
Use
.settings table{table-layout:fixed;}
or
You can use width of each cell in percentages like
.settings td{word-wrap: break-word;}
td:first-child{width:30%;}
td:nth-child(2){width:40%;}
td:last-child{width:30%;}
Check Updated Fiddle
A table I create in HTML for use in an Outlook email signature seems to show strange problems, adding extra spacing.
Here is how it looks in Outlook:
Here is how it looks in Chrome:
The code is as below:
<html>
<head>
<title>JohnDoe</title>
<style>
p {
align:justify;
}
#contentTable{
padding-top: 25px;
padding-right: 35px;
padding-bottom: 25px;
padding-left: 35px;
width: 480px;
height: 105px;
}
#logo{
height: 210px;
width: 228px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
border-collapse:collapse;
}
.table{
border-collapse:collapse;
}
#nameRow{
height: 18px;
}
#nameField{
font-size: 24;
font-family: "Helvetica";
color: #73A84D;
font-weight: bold;
width: 100%;
}
#dirRow{
height: 14px;
}
#dirField{
font-size: 18;
font-family: "Helvetica";
color: #606062;
}
.descRow{
}
.descField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #96989A;
}
.valueField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #606062;
text-align: justify;
}
</style>
<body>
<table id="contentTable">
<tr>
<td>
<img src="http://s14.postimg.org/eo35t2l4t/logo.jpg" />
</td>
<td>
<table id="infoTable">
<tr id="nameRow">
<td id="nameField">JOHN DOE</td>
</tr>
<tr id="dirRow">
<td id="dirField">
Attorney
</td>
</tr>
<tr>
<table>
<tr>
<td>
<p id="descFieldPara" class="descField">
PHONE:<br>
EMAIL:<br>
<br>
URL:
</p>
</td>
<td id="valueFieldPara" class="valueField">
<p>+ 12 3456 789 012<br>JOHN.D#BLAHBLAH.COM.US<br>ATTORNEY#BLAHBLAHJOHNDOE.COM.US<br>WWW.BLAHBLAHJOHNDOE.COM.US
</p>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
Can someone tell me what is the reason for this discrepancy?