Reputation: 153
Why is my HTML div going across the whole screen?
I've been working on a project for a few days now, and I keep coming across this problem. I have a table with data in it, and I want the padding to be 30px on each side, and the '.task-link' or 'header-6' to expand with the window. Instead the width of the div goes across the entire screen, and it doesn't look even, and it is killing me. Sorry, new to HTML, so cut me some slack please, I'm sure it's obvious, I've tried lots of different things to no success, and I don't see why it should be covering the whole screen. Anyway, here is my code:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
} <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div id="tablediv">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
</main>
</body>
Here is an example of what is happening now, and what I want it to look like. now: https://gyazo.com/00870da7fa1d8642dde8814ab4bd3bac
what I want: https://gyazo.com/8c5a48ceb6a4e2470dbf10c686992fbc
The table goes all the way, side to side,with a padding of 30px on each side, as well as the Header 6 expands to match the extend of the screen, and when it gets smaller, I want only the Header 6 to get smaller.
Upvotes: 3
Views: 735
Answers (3)
Reputation: 762
You can use bootstrap responsive table. Here the .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px) and when viewing on anything larger than 768px wide, then it will display the table by using the full width of the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>longtextlongtextlongtext</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Upvotes: 2
Reputation: 264
A bootstrap grid always has to go within a row, Also a grid persists of 12 columns.
for example:
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
This will give 3 identical columns with the same width
Snippet:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
} <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div class="row" id="tablediv">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
<div class="col-sm-2"></div>
</div>
</main>
</body>
As you can see, This makes a whitespace spot on both sides of your screen. Also https://getbootstrap.com/docs/4.0/layout/grid/ gives a lot of information, check it out for sure.
Upvotes: 1
Reputation: 2691
remove col-sm-8 and checkout bootstrap grid
https://getbootstrap.com/docs/4.0/layout/grid/
Upvotes: 1
Related Questions
- CSS DIV width 100% goes over div
- Div filling entire width of screen
- css div taking up whole screen
- div not spanning page width
- Div width is like width of page for some reason
- Div not covering the whole page?
- DIV moves out of line for no reason?
- Why is my margin going on the entire div?
- Why does page extend all the way across the screen?
- Div seemingly enclosing other parts of the page