I'm sure that there is a very basic way to fix my problem. Unfortunately, I'm really inexperienced in front-end development, but I have to fix my problem. Briefly, there are some dynamic border boxes in my table but it should be some spaces between every border box.
Now it looks like below image
However, it should be like below image
My code is below. How can I do this with changing the CSS?
.bg {
width: 100%;
padding-left: 2px;
padding-right: 2px;
}
.chart {
border: solid 1px #e31515;
color: #e31515;
width: 100%;
position: absolute;
overflow: hidden;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<span style="overflow: hidden;left: 550px; height: 150px; width: 250px; position: absolute; "> <div >
<table cellpadding="2" border="1">
<tbody>
<tr>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
<div class="bg" style="height: 129px">
<div class="chart" style=" height: 14px; margin-top: 115px"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</span>
<span style="overflow: hidden;left: 150px; height: 150px; width: 250px; position: absolute; ">
<div >
<table cellpadding="2" border="1">
<tbody>
<tr>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
<td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
<div class="bg" style="height: 129px">
<div class="chart" style="height: 14px; margin-top: 115px"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</span>
You are using padding. Instead, you need to use margin property. In box model, the padding is used for aligning the inside contents of a box. However, since you are applying the style to the , you need to mention margin-right property of each . Simply replace padding with margin property in bg style.
.bg {
width: 100%;
margin-left: 2px;
margin-right: 2px;
}
Hope this helps. If you find this solution correct, mark it as the answer.
CSS border-spacing property does what you need.
table{
border-collapse: separate;
border-spacing: 10px;
}
Example here: http://www.w3schools.com/csSref/tryit.asp?filename=trycss_table_border-spacing
Related
I'm trying to acheive the following (taken from dropbox):
My snippet (in full page):
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
Here you go...
The easiest way to achieve this circle with the letter "i" inside is to use Font Awesome icon. Move the icon to the left by setting margin-left: -25px;. You have to set z-index: 100; (the value is not important, it could be 1) to push the icon in front of everything else. It's necessary to set position: absolute;, otherwise the z-index won't work. Also, set background-color: white; so that the line of the table isn't visible in the background of the icon (try to remove the background-color to see what I'm talking about).
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th,
td {
border: 1px solid black;
padding: 1rem !important;
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px;
height: 250px;
/* Don't forget this, required for the stickiness */
}
.fa-info-circle {
position: absolute;
background-color: white;
font-size: 20px;
margin-top: -7%;
margin-left: -24%;
z-index: 100;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<table style='margin-top: 150px; margin-left: auto; margin-right: auto;'>
<thead>
<tr class='red'>
<th> <i class='fas fa-info-circle'></i> </th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style='display: flex; align-items: center; width: 100%;'>
<span>
<div style='display: inline-block; width: 22px; height: 22px; margin-left: -11px;'>
<button style='width: 22px; height: 22px; display: block; background: transparent;' aria-label='More info'></button>
</div>
</span>
<span style='margin-left: 15px; display: flex;'>Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
</body>
</html>
You can simply do that by setting the position attribute of the button to absolute and then use it to position according to its ancestor
Here is an MDN Link to know more about this
Add this CSS code to your file and it will work
button{
position: absolute;
left: -12px;
}
I added <span class="information">i</span> into your 1st td and then added the CSS as below:
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
DEMO
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="information">i</span>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
This will work for u
* {
margin: 0px;
padding: 0px;
}
td {
position: relative;
padding: 40px;
border: 1px solid;
margin: 0px;
font-family: 'arial';
}
td a {
font-family: initial;
position: absolute;
font-size: 22px;
font-style: italic;
text-decoration: none;
left: -5%;
top: 38%;
height: 25px;
width: 25px;
text-align: center;
border-radius: 50%;
color: black;
background-color: white;
border: 1px solid;
}
table {
margin: 50px;
border-collapse: collapse;
}
<table>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
</table>
When i am using the code below I can get Background Color but not the Border along the td tag. Also I am Unable to add the Spacing between two td tags . I tried cellspacing and cellpadding
.bd-highlight {
margin: 12px 12px 12px 12px;
padding-right: 20px;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 135px;
height: 10px;
border-color: white;
}
<div class="row" id="columntab">
<div class="col-6" id="columnmain">
<table class="t1" cellspacing="10">
<tbody>
<tr>
<th class="bd-highlight">Dec 2018</th>
<th>May 2018</th>
<th>Dec 2017</th>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
2 of 3 (wider)
</div>
<div class="col-3">
3 of 3
</div>
</div>
you have to use border:5px(border-width) solid(type) #ff0000(custom-color);
table tbody tr td,
table tbody tr th
{
margin: 12px 12px 12px 12px;
padding-right: 20px;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 135px;
height: 10px;
border:5px solid #f00;
}
/*.bd-highlight {
margin: 12px 12px 12px 12px;
padding-right: 20px;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 135px;
height: 10px;
border-color: white;
}*/
table tbody tr td,
table tbody tr th
{
margin: 12px 12px 12px 12px;
padding-right: 20px;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 135px;
height: 10px;
border:5px solid #f00;
}
<div class="row" id="columntab">
<div class="col-6" id="columnmain">
<table class="t1" cellspacing="10">
<tbody>
<tr>
<th class="bd-highlight">Dec 2018</th>
<th>May 2018</th>
<th>Dec 2017</th>
</tr>
</tbody>
</table>
</div>
<div class="col-3">
2 of 3 (wider)
</div>
<div class="col-3">
3 of 3
</div>
</div>
Basically right now I have everything in a straight line, I know it isn't responsive, not part of the task. I want to change it so I have 'clock hours, incentive, off clock, and regular hours' on the top row & overtime hrs, personal, vacation, and holiday' directly beneath it. And then have total hours off to the side near the signature area. I have some thoughts on how to do it but I feel like it could be done in a simple way so I don't know exactly the best way of tackling it.
/* *{
margin: 0;
padding: 0;
} */
/* #page {
size: 8.5in 11in;
} */
h2 {
text-align: center;
}
.signandauth {
/*div for authorized, signature & their textboxes*/
position: absolute;
top: 0;
right: 0;
margin-right: 20px;
margin-top: 20px;
}
.dateSection {
/*div for date script*/
position: absolute;
top: 0;
left: 0;
margin-left: 20px;
margin-bottom: 20px;
margin-top: 65px;
}
.section1 {
padding: 30px 0;
border: 4px solid black;
/* margin-right: 20px; */
}
.section2 {
padding: 70px 0;
border: 4px solid black;
}
label {
border: 1px solid black;
padding: 0.2em;
margin: 0.2em;
display: inline;
}
p {
margin: 0.3em;
padding: 0.3em;
font-weight: bold;
display: inline;
text-align: center;
}
#date {
float: left;
}
#authorized {
/*text box*/
width: 170px;
height: 30px;
float: right;
}
#authorizeP {
/*the label*/
float: right;
}
#signature {
width: 170px;
height: 30px;
float: right;
}
#signP {
float: right;
}
table,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
float: right;
}
td {
width: 90px;
border: 1px solid black;
padding: 5px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<body>
<title>Time Card</title>
<div class="section1">
<h2>Time Card: AWS</h2>
<div class="dateSection">
<p id="date"></p>
<script>
var date = new Date();
document.getElementById("date").innerHTML = date.toDateString();
</script>
</div>
<br>
<br>
<br>
<p>Clock Hours</p>
<label id="clockHours">0.00</label>
<p>Incentive</p>
<label id="Incentive">0.00</label>
<p>Off Clock</p>
<label id="offClock">0.00</label>
<p>Regular Hours</p>
<label id="regularHours">0.00</label>
<p>Overtime Hours</p>
<label id="overtimeHours">0.00</label>
<p>Total Hours</p>
<label id="totalHours">0.00</label>
<p>Personal</p>
<label id="personal">0.00</label>
<p>Vacation</p>
<label id="vacation">0.00</label>
<p>Holiday</p>
<label id="holiday">0.00</label>
<div class="signandauth">
<p id="authorizeP">Authorized</p>
<br>
<br>
<label id="authorized"></label>
<br>
<br>
<br>
<p id="signP">Employee Signature</p>
<br>
<label id="signature"></label>
</div>
</div>
<br>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="section2">
<table>
<tr>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
</table>
</div>
</body>
</html>
How about putting them in a 2x4 table?
<br>
will break onto a new line, that should do what you're hoping.
<table >
<tr>
<th>Clock Hours</th>
<th>Incentive</th>
<th>Off Clock</th>
<th>Regular Hours</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
<br>
<table >
<tr>
<th>Overtime Hours</th>
<th>Personal</th>
<th>Vacation</th>
<th>Holiday</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
Receiving odd behaviour of a link in xslt that breaks the page.
I am using XSLT to transform an XML list of manuals. I have included a link to open the manual, (as .pdf) with a target="_blank"
In Internet Explorer 8, (Yes, we are still having to use this), the link functions normally, opening the pdf in a new window, but the page the link was one gets shifted down about 1300-1500px. Refreshing the page fixes it, and it seems in testing that opening the same link a second time and future times it does not exibit this behaviour.
It does not shift the header or menu containers, only the body container.
I have used the developer tools to get the html it is using and do not see where or why it would be doing this. EDIT: I see at the bottom of the html output the css and it appears to have some extreme values for positions maybe?
Relevant (HTML) code:
<!-- saved from url=(0071)http://www.example.com/unit/admin/instructions/instructions.xml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file -->
<HTML>
<HEAD>
<TITLE>Intranet</TITLE>
<META content="text/html; charset=UTF-16" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="../../../scripts/jquery-1.11.1.min.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="../../../css/tacamo.css">
</HEAD>
<BODY style="ZOOM: 1">
<DIV style="MARGIN: auto" id=wing-page-container>
<DIV id=header-container><IMG alt="" align=middle src="../images/elements/header.png" width=1000></DIV>
<DIV id=nav-container>
<DIV id=menu>
<UL>
<LI><A id=menu href="http://www.example.com/unit/admin/admin.html">BACK</A></LI>
</UL>
</DIV>
</DIV>
<DIV id=instructions-content-container>
<TABLE class=instructions align=center>
<TBODY>
<TR>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Instruction Number</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Date</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 25px">COG</TH>
<TH style="WIDTH: 500px">Description</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 50px">Open</TH>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">1</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">09/24/1997</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 1 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/1-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #ffffff">
<TD style="WIDTH: 75px">2</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">03/26/2010</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/2-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">3</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">04/10/2014</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/3-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV id=footer-container>
<P class=footer>Admin POC: Admin ITPOC's (555-1212)</P>
</DIV>
</DIV>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/1-thing.pdf</DIV>
</DIV>
<DIV style="Z-INDEX: 459008; BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 0; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 25px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 25px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-TOP: 0px; TOP: 5808px; BORDER-RIGHT: 0px; PADDING-TOP: 0px; LEFT: 1346px" class=IEDevToolbarAddedElement>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/3-thing.pdf</DIV>
</DIV>
</BODY>
</HTML>
I would like to put CSS buttons into several tables. Ideally, each button should fill the corresponding table cell. This presents a problem because if I hard-code the button width in CSS, I would need a separate class for each table dimension.
Is there a way to have the buttons fit into the table cells?
HTML:
<center>
<table border="1" width="90%" class="buttons">
<tr>
<td width="25%">Link1 goes here</td>
<td width="25%">Link2<br>goes<br>here</td>
<td width="25%">Link3<br>goes<br>here</td>
<td width="25%">Link4<br>goes<br>here</td>
</tr>
</table>
<p>
<table border="1" width="90%" class="buttons">
<tr>
<td width="20%">Link1 goes here</td>
<td width="20%">Link2<br>goes<br>here</td>
<td width="20%">Link3<br>goes<br>here</td>
<td width="20%">Link4<br>goes<br>here</td>
<td width="20%">Link5<br>goes<br>here</td>
</table>
</center>
CSS:
.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}
Play with the code:
http://codepen.io/anon/pen/bIEtC
You should try to set height and width 100%. Like this:
.buttons a
{
display: inline-block;
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
Try not to hard code CSS into the HTML... it leads to a mess of trouble!
Taking the inline styling out of the html seems to fix most problems. Then, just like #ArmanVirdi said, add the width and the height of the link to be 100%.
The <center> tags don't seem to be doing anything, so those are removed in the below HTML, as well as an unclosed <p> tag.
HTML
<table class="buttons width-25">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
</tr>
</table>
<table class="buttons width-20">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
<td>Link5<br>goes<br>here
</td>
</table>
CSS
table {
width: 100%;
}
.width-20 td {
width: 20%;
}
.width-25 td {
width: 25%;
}
.buttons {
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a {
display: inline-block;
height: 100%;
width: 100%;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
box-shadow: 1px 1px 0px #888888;
}
JSFiddle for reference
Add to .buttons:
width:0;
Resut: