I've tried to move the table, but I couldn't do that. I want to move the table that is inside div. But I only can move the table only to the left/right. I want the table to be free. What is my mistake? What I missed? Maybe I did styling wrong? Please help me to solve this problem.
Here is the code:
/*Imports*/
#import url('https://fonts.googleapis.com/css?family=Ubuntu');
body{
background-color: #21ff00;
margin: 0;
padding: 0;
}
.division1 td{
padding: 5px;
border: 2px solid #000;
color: #fff;
}
.division1{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background-color: #fff;
}
.division1 table{
width: 380px;
height: 380px;
border: 1px solid #000;
margin: 35px 28px;
border-collapse: collapse;
text-align: center;
background-color: #0f6bff;
font-family: 'Ubuntu', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Mirashraf</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="division1">
<table border="1">
<tr>
<td><b>Name</b></td>
<td><b>Price</b></td>
</tr>
<tr>
<td>MacBook</td>
<td>$999.99</td>
</tr>
<tr>
<td>iPhone</td>
<td>$499.99</td>
</tr>
<tr>
<td>iPad Pro</td>
<td>$649.99</td>
</tr>
<tr>
<td>Apple Watch</td>
<td>$1199.99</td>
</tr>
</table>
</div>
</body>
</html>
Please, help me.
Thanks to everyone in behind.
You can set the div to absolute position and place it anywhere you like.
.division1{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background-color: #fff;
position: absolute;
top: 35%;
}
Kindly split margin to 4 parameters as below margin: toppx rightpx bottompx leftpx , Below css will move table to center of the screen
.division1 table {
width: 380px;
height: 380px;
border: 1px solid #000;
margin: 50px 28px 41px 40%;
border-collapse: collapse;
text-align: center;
background-color: #0f6bff;
font-family: 'Ubuntu', sans-serif;
}
If you mean that you want the Table to be centred, you need to set margin-left:auto, margin-right:auto in your CSS for the table. This assumes your table has a width, which it does.
If you mean that you want to drag the table around, then that's a whole different question.
Related
Trying to convert a HTML to PDF using wkhtmltopdf.
I want the table in the generated PDF to be at the center but the table represented here in HTML always aligns left in the created PDF?
What could be going wrong?
PS: I am new to the front-end altogether. I think i am making some small mistake in styling.
<div class="divGeneral" id="sumDiv">
<table id="infoTable">
<tr>
<th>Pr Name: </th>
<td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
</tr>
<tr>
<th>Su Date: </th>
<td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
</tr>
</table>
</div>
The style sheet has
.divGeneral {
width: 100%;
//float: left;
text-align: center;
margin: 0 auto;
object-fit: cover;
}
#sumDiv {
// margin-bottom: 50px;
// display: inline-block;
// float: none;
text-align: left;
margin: 0 auto;
}
#infoTable th {
border: 0px;
vertical-align: top;
padding: 4px 2px 0px 2px;
width: 180px;
text-align: right;
margin-left: auto;
margin-right: auto;
}
#infoTable td {
border: 1px solid black;
padding: 3px 3px 2px 3px;
text-align: left;
vertical-align: top;
margin-left: auto;
margin-right: auto;
}
textarea
{
margin: 0px;
}
textarea .multiline{
margin-top: 2px;
}
If I understand your question correctly, you can add
#infoTable{
margin: 0 auto;
}
This simply center-align the table in .divGeneral which is width:100%.
I also removed some css code that has no effect in the current task.
Please run the code below to see if this is what you want.
.divGeneral {
width: 100%;
object-fit: cover;
}
#sumDiv {
text-align: left;
margin: 0 auto;
}
#infoTable{
margin: 0 auto;
}
#infoTable th {
vertical-align: top;
padding: 4px 2px 0px 2px;
text-align: right;
}
#infoTable td {
border: 1px solid black;
padding: 3px 3px 2px 3px;
text-align: left;
vertical-align: top;
}
textarea .multiline{
margin-top: 2px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="divGeneral" id="sumDiv">
<table id="infoTable">
<tr>
<th>Pr Name: </th>
<td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
</tr>
<tr>
<th>Su Date: </th>
<td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
Use flexbox method.I hope this will work for you.
.divGeneral {
display:flex;
justify-content:center;
align-items:center;
}
This question already has answers here:
How do I remove the double border on this table?
(4 answers)
Closed 8 years ago.
(EDIT: Solved. I was on the right track with the border-collapse, but I had to use ctrl+f5 to see it)
Tried using border-collapse and border-spacing to remove them, but it didn't work.
Code:
<main>
<div class="adminr1">
<section class="adminc1">
<table class="adminResults">
<thead>
<td>cell</td>
<td>cell</td>
</thead>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</section>
</div>
</main>
CSS:
*
{
margin: 0;
padding: 0;
font-size: small;
font-family: Roboto;
vertical-align: middle;
text-decoration: none;
}
main
{
font-size: 0;
line-height: 1.5;
text-align: center;
margin: 0 auto;
width: 86%;
min-width: 1000px;
}
section
{
border: 1px solid #BBB;
background: #FFF;
border-radius: 7px;
display: inline-block;
overflow: hidden;
}
.adminr1
{
display: inline-block;
width: 66%;
height: 700px;
margin-right: 5px;
font-size: 0;
margin-bottom: 10px;
}
.adminc1
{
width: 100%;
height: 100%;
font-size: 0;
}
/*Table Styles:*/
.adminResults
{
width: 100%;
border: 1px solid #000;
}
.adminResults thead
{
border: 1px solid #000;
}
.adminResults tr td
{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
So far, this is the only page I have which uses a table, so I have no table-related styles anywhere else that could be blocking or overwriting the properties I'm trying to add, nor do i have any border-related files on other elements applied generally enough to do the same thing.
I'm obviously missing something, because this seems like it should be a very easy thing to do.
Use border-collapse property to remove spacing between cells
table.adminResults{
border-collapse:collapse;
}
Fiddle Demo
add the border-collapse:collapse; to table.
.adminResults{width:100%;border:1px solid #000;border-collapse: collapse;}
Here is an example:
http://jsfiddle.net/kheema/n4rsy/1/
Did your try to add border="0" cellpadding="0" cellspacing="0" inside table? Like this:
<table class="adminResults" border="0" cellpadding="0" cellspacing="0">
Set border-spacing: 0px; and border-collapsing: seperate; on the Table.
.adminResults {
width: 100%;
border: 1px solid #000;
border-spacing: 0px;;
border-collapse: seperate;
}
Check out this updated: Fiddle Demo
When I zoom out far on my browser, Chrome, the info_table moves down. Why does it do this? Also when added overflow: auto; to section, it also moves. What can I do?
Jsfiddle http://jsfiddle.net/PbwS8/3/
CSS
*{
font-size:100%;
margin: 0px;
padding: 0px;
}
body{
width: 100%;
}
#info_table{
float: left;
width: 480px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
#left{
float:left;
margin: 60px 0px;
}
#photo{
float: left;
width: 176px;
height: 176px;
border: 1px solid black;
}
#section{
margin: 160px auto 0px;
width: 675.2px;
height: 320px;
#overflow: auto;
#border:1px solid black;
}
#choosephoto{
width: 64px;
}
#submitwords{
width: 72px;
height: 28px;
margin-left: 104px;
#border:1px solid purple;
}
#wrapper{
display: block;
box-shadow: 3px 10px 5px #888888;
margin: 0px auto;
margin-top: 48px;
width: 1024px;
height: 960px;
overflow: auto;
background:white;
}
HTML
<div id="section">
<body>
</body>
<form>
<div id="left">
<div id="photo">
</div>
<br/>
<input type="file" id="choosephoto" name="uploadphoto"/>
</div>
<table id="info_table">
<tr>
<td>Name:</td>
</tr>
<tr>
<td><input/></td>
</tr>
<tr>
<td>Info:</td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><button type="submit" id="submitwords">Update</button></td>
</tr>
</table>
</form>
</div>
As for what is going on: It appears the browser is compensating for the zoom level by changing the width of the borders on #photo.
67% Zoom:
50% Zoom:
As for how to fix it? Unless being able to zoom like this is a badly needed, I wouldn't worry about it because it is a lot of work to make sure everything scales correctly.
This is because the width for info_table is set too wide for section width.
For example, reducing the width in info_table would alleviate this. So you could try replacing it with the following.
#info_table{
float: left;
width: 460px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
Having said that, it would be better to read up on using a Grid System (like 960.gs).
Why you have a body tag inside?
Your code is a mess, I re-write it for you here
here i have two tables
<div class="ex1">
<table>
<th> table1</th>
<tr>..</tr>
<tr>....</tr>
</table>
</div>
<div class="ex2">
<table>
<th>table2</th>
<tr>..</tr>
<tr>....</tr>
</table>
</div>
my css for those class ,what i wrote is
.ex1{
display: block;
position: relative;
margin: 0;
padding: 0;
border: 0px solid #CCC;
overflow: hidden;
clear: right;
height: 392px;
width: 630px;
}
.ex2{
display: block;
position: relative;
clear: right;
margin: 3px 0 0 0;
border: 1px solid #CCC;
padding-top: 0px;
color: #5A5655;
background-color: #F8F8F8;
text-align: left;
overflow: auto;
z-index: 88;
height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 620x;
}
here what i want is when i wrote the above code ,it displays the 2 tables fine,i want to display the table2 first ,then i want to display the table1 by using css only without touching the html code....
how can i do this one ? can anyone help me...
http://jsfiddle.net/Y3BMe/
Use position:absolute for the second table with top: 0 and then move down the first table by using the margin-top property
In your real world example it may require some tweaking - see css positioning for help
I'm trying to make a 2x2 grid, which fills up the entire window in an iPhone, with a table.
Currently it looks like this:http://dl.dropbox.com/u/182509/photo.PNG
Note the squshed-uppy-ness of the right column, and the gap at the left.
I cant fix either.
Relevant css:
body { margin: 0; position: absolute; height: 100%; }
.full { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; }
table { border-width: 0px; border-spacing: 0px; border-style: hidden; border-color: gray; border-collapse: collapse; background-color: white; width: 100%; height: 100%; left: 0; top: 0px; margin: 0; padding: 0px; position: absolute; }
td { border-width: 1px; padding: 1px; border-style: solid; border-color: gray; background-color: white; width: 50%; height: 160px; }
and html:
<div id="helpView" class="full">
<table id="help">
<tr>
<td>Hey..</td>
<td>Hi.</td>
</tr>
<tr>
<td>Hello.</td>
<td>Greetings!</td>
</tr>
</table>
</div>
Any help appreciated
Since your td has border set to 1px, it adds to the total width of what we are seeing, so you have to reduce the width of your td. See box model for reference:
http://www.w3.org/TR/CSS2/box.html
or you can set the left of your table to -1 to adjust it to left:
table{left:-1}
it will work since the position is absolute.
You've overcomplicated things.
http://jsfiddle.net/Z3rs5/
You should write simple code, also, do't cram all of the CSS statements in one row, every time you do that, God kills a kitten!