I have two rows in my table that have random gaps beneath them. I have tried looking at colspans and messing around for ages, but they just don't seem to go. I have 3 <th>'s as you can see, and tried to align the rest of the table with this. The table is complete, and looks okay except for the blank lines beneath the rows with "timeleft" and "reward".
<table class="tabelle separate">
<tr>
<th>Jail</th><th></th><th></th>
</tr>
<tr>
<td width="40%"><div class="zelle"><center><b>Inmate</div></td>
<td width="25%"><div class="zelle"><center><b>Time left</div></td>
<td width="35%"><div class="zelle"><center><b>Reward</div></td>
</tr>
<?php
//desplay data
$get = mysql_query("SELECT * FROM jail");
while($row = mysql_fetch_assoc($get))
{
//get data
$id = $row['id'];
$name = ucwords($row['username']);
$timeleft = $row['time'] - time();
$reward = number_format($row['reward']);
$jailedcountry = $row['country'];
if($country === $jailedcountry){
echo "
<tr>
<td width=40%><div class='zelle'>
<form action='jail.php' method='post'>
<input name='bustid' type='radio' class='radio' value='$id'><a href='viewprofile.php?viewuser=$name'>
$name</a></div></td>
<td width=25%><div class='zelle'>$timeleft
</div></td>
<td width=35%><div class='zelle'>
$$reward</div></td>
</tr>
";
}
echo "
<tr><br><br>
<td align='center' colspan='3'><div class='zelle'>
<center> <input type='submit' name='bust' class='tbox' value='Bust User'> <Br>
</div>
</td>
</tr>
</form>
";
}
?>
<tr><td colspan="3"><div class="zelle">
<form action='jail.php' method='post'><center><input type='submit' name='pointsleave' class='tbox' value='Leave Jail (Costs 2 points)'> </center></form>
</div></td></tr>
</table>
CSS
.tabelle {
width: 50%; border-collapse: collapse; margin: auto; border-right: 1px solid Black;
}
.zelle{
padding: 1px;
background-color: #202020;
font-family: Arial;
font-size: 12px;
text-align: center;
color: white;
}
th {
background: #696969;
background-image: -webkit-linear-gradient(top, #696969, #393b3d);
background-image: -moz-linear-gradient(top, #696969, #393b3d);
background-image: -ms-linear-gradient(top, #696969, #393b3d);
background-image: -o-linear-gradient(top, #696969, #393b3d);
background-image: linear-gradient(to bottom, #696969, #393b3d);
padding: 6px;
color: White;
font-size: 14px;
font-family: Arial;
}
.separate {
border-radius: 3px;
border-spacing: 0;
border-collapse: separate;
}
.separate tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
.separate tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
.separate tr th:first-child, table.separate tr td:first-child {
border-left: 1px solid Black;
}
.separate tr:first-child th, table.separate tr:first-child td {
border-top: 1px solid Black;
}
.separate tr:first-child th:first-child, table.separate tr:first-child td:first-child {
border-top-left-radius: 3px
}
.separate tr:first-child th:last-child, table.separate tr:first-child td:last-child {
border-top-right-radius: 3px;
}
Related
Hi we are working on a uni project. i am having a problem with the design. we have to use linear gradient as requirement from the client. it works fine on normal pages but when i use it in a page where i use a "form to submit data into a table" the screen splits into multiple portions. sometimes in 2 sometimes more.
here is the problem image
the problem screenshot
It should be seem less like other pages background
like this should be like this image
Here is my css code
#charset "utf-8";
/* CSS Document */
body,ol,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,fieldset,legend,input,textarea,select{background-color:none; list-style:none; margin:0; padding:0;}
body {background:linear-gradient(to bottom, #86090F 0%, #EA3C22 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); font-family:Roboto,sans-serif; font-weight:300;}
a{display:block; text-decoration:none;}
a:hover{text-decoration:none;}
img{border:none; vertical-align:middle;}
.clear{overflow:hidden; display:block; height:0; font-size:0; line-height:0; clear:both;}
.fl{float:left;width:100%;}
.fr{float:right;width:100%;}
.logout{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
width: 6%;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #63513D;
border: none;
border-radius: 15px;
float:left;
margin-top: 15px;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 15px;
width: 15%;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #63513D;
background-color: #D6D2C2;
border: none;
border-radius: 15px;
margin-top: 15px;
}
.button:hover {background-color: #EAE8E0;}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.container{
width:70%;
margin:0 auto;
font-size: 150%;
}
header{
width:100%;
margin:0 auto;
height:85px;
border-bottom:2px solid #404040;
background-color:rgb(245, 242, 228);
}
b
.img{
width:150px;
border-right:1px solid #333;
height:85px;
margin-left:2%;
}
.content1{ width:50%;
height:20%;
font-size: 20px;
text-align: left;
margin:0 auto;
}
.content1 h3{
font: blone 14px Arial;
text-align:center;
margin-left:5px;
}
.content1 table{
width:100%;
border-bottom:1px solid #999;
border-right:1px solid #999;
border-left:none;
border-top:none;
margin-top:10px;
margin-left:5px;
background-color: rgb(245, 242, 228);
}
.content1 table td{
width:200px;
text-align:left;
border-left:1px solid #999;
border-top:1px solid #999;
border-right:none;
border-bottom:none;
height:25px;
font: 20px Impact, Arial;
line-height: 95%;
}
.content1 table tr{
border:none;
}
.box{
width:1050px;
margin:0 auto;
margin-top:15px;
}
.content2{
width:490px;
float:left;
}
.content2 h3{
font:blone 14px Arial;
text-align: center;
}
.lyb_box{
width:100%;
margin-top:15px;
height:400px;
border:1px solid #000;
margin-left:1px;
background-color: rgb(245, 242, 228);
}
.lyb_box_nr{
float:left;
width:90%;
margin-top:20px;
}
.lyb_box_nr p{
font:normal 14px Arial;
float:left;
width:100%;
margin-left:7px;
}
.lyb_box_nr input{
width:100%;
float:left;
margin-left:10px;
height:30px;
border:1px solid #CCC;
}
.lyb_box_nr select{
width:100%;
float:left;
margin-left:20px;
height:30px;
border:1px solid #CCC;
}
article{
width:40%;
border:2px solid #404040;
float:right;
}
.search{
float:left;
width:150px;
border-radius:3px;
margin-top:20px;
color:#000;
text-align:center;
height:25px;
margin-left:330px;
}
.content3{
float:right;
width:500px;
height:400px;
border:1px solid #404040;
margin-top:31px;
}
.content4{
float:center;
width:500px;
height:400px;
border:1px solid #404040;
margin-left:700px;
}
#nav{
color: red;
text-align: center;
text-transform: uppercase;
line-height: 2.8;
word-spacing: 10px;
width: 80%;
margin: -50px auto;
height: 46px;
border-radius: 8px;
border: 1px solid #cbcbcb;
border-bottom: 4px solid #adadad;
margin-right:0px;
}
#nav a{
display: block;
width: 30%;
height: 46px;
line-height: 40px;
float: left;
border-bottom: 4px solid #adadad;
text-align: center;
text-decoration: none;
color: black;
}
#nav a:active{
color:green;
background-color: white;
}
#nav a:hover{
border-bottom: 4px solid red;
color: red;
}
footer{
clear: both;
font-weight: bold;
font-size: 25px;
color: #86090F;
margin: 0 px auto;
position: absolute;
bottom: 0px;
width: 100%;
background-color:#2D251A
}
#footer a:hover{text-decoration:underline;background-color:withe;}
#footer a, #footer a:visited {color:#fff; text-decoration:none;}
#legal {background-color:white; clear:both; list-style-type:none; overflow:hidden; padding:20px 120px 20px 24px;}
li.first {padding-left:45%;}
li:not(#flag) {float:left; padding-right:25px;list-style-type:none;}
#k{
padding-left:40%;
width:500px;
height:400px;
border:0 px solid #404040;
margin-top:-10px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<? include("header.html"); ?>
</head>
<body>
<h4><?php echo $e; ?><h4>
<div>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<section class="content1">
<table border="1">
<tr>
<td>
<label>
User Name</label>
</td>
<td>
<input type="text" name="username" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Password</label>
</td>
<td>
<input type="text" name="password" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Name</label>
</td>
<td>
<input type="text" name="name" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Email</label>
</td>
<td>
<input type="text" name="email" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Campus</label>
</td>
<td>
<input type="text" name="campus" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
</label>
</td>
<td>
<input name="submit" type="submit" value="Submit" />
</td>
</tr>
</table>
</section>
</form>
<div clear="both"></div>
Back to management<br/>
</body>
</html>
i am really stuck in this problem from a long time. what is wrong here?
it because your body does not stretch to full height.
it stretch until the 'Back to Management' button only.
Adding this should get you what you want.
html,
body {
min-height: 100%;
}
https://codepen.io/jacobgoh101/pen/mENqNE
I just resolved an issue with my field list(which was careless I admit),but I cannot find a way to solve this issue. I looked at error-column-count-doesn't-match-value already but could not find a solution that worked with my code. Any Suggestions?
attendence-form.php
<?php include( "dbconfig.php"); session_start(); if(!isset($_SESSION[ 'login_user'])) { header( "Location: default.php"); } ?>
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>User Area|SparkAcad</title>
<style>
body {
background-size: cover;
font-family: Montserrat;
}
.logo {
width: 213px;
height: 36px;
margin: 30px auto;
}
.login-block {
width: 320px;
padding: 20px;
background: #fff;
border-radius: 5px;
border-top: 5px solid #ff656c;
margin: 0 auto;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: Montserrat;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#username:focus {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active,
.login-block input:focus {
border: 1px solid #ff656c;
}
.login-block button {
width: 100%;
height: 40px;
background: #ff656c;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
font-family: Montserrat;
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #ff7b81;
}
table#header {
width: 100%;
background-color: #ff3366;
}
tr:hover {
background-color: #f5f5f5
}
</style>
</head>
<body>
<div class="logo">
<table id="header" align="center">
<tr>
<td>
Home
</td>
<td>
Student Managment
</td>
<td>
Transcript/SSL
</td>
<td>
</td>
</tr>
</table>
</div>
<div class="login-block">
<!---uper boundAll content should go between these --->
<?php if(isset($_POST[ 'search'])) { $valueToSearch=$ _POST[ 'valueToSearch']; // search in all table columns // using concat mysql function $query="SELECT * FROM `records` WHERE CONCAT(`FName`, `LName`) LIKE '%" .$valueToSearch. "%'"; $search_result=f
ilterTable($query); } else { $query="SELECT * FROM `records`" ; $search_result=f ilterTable($query); } // function to connect and execute the query function filterTable($query) { $connect=m ysqli_connect( "mysql.hostinger.co.uk", "u733142706_root",
"Summer$2000", "u733142706_user"); $filter_Result=m ysqli_query($connect, $query); return $filter_Result; } ?>
<form action="insertmulti.php" method="post" align="center">
<table border="1" align="center">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Mark</th>
</tr>
<!-- populate table from mysql database -->
<?php while($row=m ysqli_fetch_array($search_result)):?>
<tr>
<td>
<?php echo $row[ 'FName'];?>
</td>
<td>
<?php echo $row[ 'LName'];?>
</td>
<td>
<input type="text" placeholder="Present/Absent/Tardy" id="Mark" value="Present">
</td>
</tr>
<?php endwhile;?>
</table>
<input type="Submit" value="Take Attedence">
</form>
<!---lower bound All content should go between these --->
<br>
<br>
Logout
</div>
</body>
</html>
insertmulti.php
<?php
/*
Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password)
*/
$link = mysqli_connect("mysql.hostinger.co.uk", "u733142706_root", "Summer$2000", "u733142706_user");
// Check connection
if ($link === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Escape user inputs for security
$FName = mysqli_real_escape_string($link, $_POST['FName']);
$LName = mysqli_real_escape_string($link, $_POST['LName']);
$Mark = mysqli_real_escape_string($link, $_POST['Mark']);
// attempt insert query execution
$sql = "INSERT INTO attendence (FName, LName, Mark)
SELECT 'FName' ,1
UNION ALL
SELECT 'LName' ,2
UNION ALL
SELECT 'Mark' ,3";
if (mysqli_query($link, $sql))
{
echo "Records added successfully.";
else
{
echo "ERROR: Could not take attendence " . mysqli_error($link);
}
}
// close connection
mysqli_close($link);
?>
You are inserting a table - each select is a row, each comma delimited item in the selects is a field. Each select has 2 fields, while the parenthetical field list has 3 fields. Try something like:
INSERT INTO attendence (FName, LName, Mark)
$FName, $LName, $Mark
To use your select test setup:
INSERT INTO attendence (FName, LName, Mark)
SELECT 'FName1', 'LName1', 1
UNION ALL
SELECT 'FName2', 'LName2', 2
UNION ALL
SELECT 'FName3', 'LName3', 3
I am using dompdf in codeigniter, the HTML page looks fine but in dompdf generated pdf, there is a black box.
The code in the footer section is:
<div class="signature-footer">
<table>
<tr>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Prepared By<br><?php echo $quotation_detail[0]->employee_name; ?><br><?php echo $quotation_detail[0]->designation_name ; ?></td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Authorized Signature<br> <br> </td>
</tr>
</table>
</div>
</div><div class="below-border-footer"></div><div style="text-align: center"><img src="<?php echo base_url(); ?>interface/img/footerImage.png"> </div></div></body>
</html>
CSS for these two elements:
.below-border-footer {
width: 100%;
border-top: 0 ;
padding-bottom: 0;
text-align: center;
}
.signature-footer {
font-size: 12px;
font-weight: bold;
width: 100%;
position: relative;
margin-top: 70px;
margin-bottom: 2px;
}
I've tried for hours but no result. How can I remove the black box in the footer?
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Browsers shows like this Browsers View but Generated PDF by dom pdf shows like this Generated PDF View
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header { position: fixed; left: 0px; width:100%; bottom: -150px; right: 0px; height: 150px; background-color: #4b94d9; color:#000; text-align: left; }
#page-wrap {
width: 700px;
margin: 0 auto;
}
.center-justified {
text-align: justify;
margin: 0 auto;
width: 30em;
}
table.outline-table {
border: 1px solid;
border-spacing: 0;
}
tr.border-bottom td, td.border-bottom {
border-bottom: 1px solid;
}
tr.border-top td, td.border-top {
border-top: 1px solid;
}
tr.border-right td, td.border-right {
border-right: 1px solid;
}
tr.border-right td:last-child {
border-right: 0px;
}
tr.center td.center {
text-align: center;
valign:"middle";
}
td.pad-left {
padding-left: 5px;
line-height: 2;
}
tr.right-center td, td.right-center {
text-align: right;
padding-right: 50px;
}
tr.right td, td.right {
text-align: right;
}
.content > div > span{
display:inline-block;
width:50%; /* or choose some other value */
}
.contentdate > div > span{
display:inline-block;
width:35%; /* or choose some other value */
}
<table width="100%" class="outline-table">
<tbody>
<tr class="border-bottom border-right" style="background:#353940;color:#FFF;">
<td width="35%" class="pad-left"><strong>Item</strong></td>
<td width="10%" style="text-align:center;"><strong>Quantity</strong></td>
<td width="10%" class="right"><strong>Unit Cost</strong></td>
<td width="15%" class="right"><strong>Total</strong></td>
</tr>
<tr class="border-right">
<td class="pad-left">some item name one</td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
</tbody>
</table>
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Try This.
td.pad-left {
padding-left: 5px;
//line-height: 2; <--remove this
}
Html
<tr class="border-right">
<!-- give margin top in particular line -->
<td class="pad-left"><p style="margin-top:10px;">some item name one</p></td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
I wrote a PHP code to generate a table dynamically. The head of the table can be any text value in a database and the column of the table can be any text in the database.
If the value of the columns are the same or similar, then the width should be somewhat the same.
the following is my HTML code that is generated by PHP
<div style="margin: 0 auto; text-align: center;">
<table class="common2">
<thead>
<tr>
<th colspan="12">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; width: 150px;">Answer Options</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">3</td>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
<td style="text-align: center;">6</td>
<td style="text-align: center;">7</td>
<td style="text-align: center;">8</td>
<td style="text-align: center;">9</td>
<td style="text-align: center;">10</td>
<td style="text-align: center;">11+</td>
</tr>
<tr>
<td style="text-align: left; width: 150px;">Response Count</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
</tr>
</tbody>
</table>
</div>
this is my common2 css code
.common2
{
width: 100%;
border: solid #E6E6E6 1px;
margin: 0 auto;
padding: 0;
border-spacing: 0px;
/* border-collapse: collapse; */
}
.common2 td
{
padding: 6px;
border: solid #E6E6E6 1px;
}
.common2 th
{
color: #fff;
font-weight: bold;
text-align: center;
border: solid #E6E6E6 1px;
background-color: #1A1A1C;
padding: 8px;
font-size: 14.5px;
}
.common2 th.highlighed
{
color: #fff;
font-weight: bold;
text-align: center;
border: 0px solid #DBDBDB;
background-color: #666666;
padding: 6px 10px;
}
.common2 tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
.common tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.common2 tr:nth-child(even)
{
background-color: #E8E8E8; /*#E7E9E8; /*#D6D8D7;*/
position: relative;
}
.common2 td.stickOut
{
background-color: #DDEAFA; /*#DBAFAF;*/
position: relative;
font-weight: bold;
border: solid #DBDBDB 1px;
}
.common2 td.head
{
background-color: #25328C; /* #4F4F4F; */
text-align: center;
border: 1px solid #25328C;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
height: 35px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2C3C92), color-stop(1, #25328C));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #2C3C92 0%, #25328C 100%);
}
.common2 td.subfoot
{
background-color: #FFFF99; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
color: #000;
font-weight: 600;
font-style:italic;
padding: 4px 10px;
}
.common2 td.foot1
{
background-color: #999999; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
.common2 td.foot2
{
background-color: #555555; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
Here is a screenshot of my current output.
How can I make those columns with a similar width, excluding the very first column, as I specified how wide that will be?
remove width property from .common2
http://jsfiddle.net/raam86/knj9E/