Home>
Using Bootstrap4's table-responsive,
I want to scroll the table horizontally when the window width is narrower than the table.
When described as follows,
Horizontal scrolling appears on the table between 576px and 991px,
When it becomes 575px or less, it is canceled, and the horizontal scroll appears at the bottom of the screen, and the entire table width appears.
item01.html
<! DOCTYPE html>
<html>
<head prefix = "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset = "UTF-8">
<title>ITEM01</title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "icon" href = "../../ img/favicon.ico">
<link rel = "canonical" href = "">
<!-Style sheet here->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" mous
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity = "sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt + Y8vEf7N7fWony" mous
<link rel = "stylesheet" href = "../../ css/slick-theme.css" />
<link rel = "stylesheet" href = "../../ css/slick.css" />
<link rel = "stylesheet" href = "../../ css/item01.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type = "text/javascript" src = "../../ js/load.js"></script>
</head>
<body data-spy = "scroll" data-target = "# navbar">
<!-******************** HEADER ********************->
...
<!-******************** HEADER ********************->
<!-******************** BREADCRUMB ********************->
<nav aria-label = "Breadcrumb list">
<ol>
...
</ol>
</nav>
<!-******************** BREADCRUMB ********************->
<!-******************** MAIN ********************->
<main>
<!-***** Main content ****->
<section>
<table>
<tr>
<th>●●</th>
<th>●●●●●●●</th>
<th>●●●●●●●●</th>
<th>●●●●</th>
<th>●●●●●●●●●</th>
<th>●●●</th>
<th>●●●●●●</th>
</tr>
<tr>
<td>
AAAAAAAA
</td>
<td>BBBBBBBBBBBBBB</td>
<td>CCC</td>
<td>DDDDDDDDD</td>
<td>EEE</td>
<td>&# x25CE;</td>
<td>
Here
</td>
</tr>
<tr>
<td colspan = "7">
<p>[FFFFF]<br>
&# x25CE;: GGGGGGGGGGGGGGGGGGGG<br>
&# x25CB ;: HHHHHHHHHHHHHHHHHHHHHHHHHHHHH<br>
&# x25B3 ;: IIIIIIIIIIIIIIIIII<br>
&# x00D7 ;: JJJJJJJJJJJJJJJJJJJJ
</p>
</td>
</tr>
</table>
</section>
<!-div->
<!-/. row->
</main>
<!-******************** FOOTER ********************->
<script type = "text/javascript">// Load footer
includeHTML ("inc/footer.html", "../../");
</script>
<!-******************** FOOTER ********************->
<!-******************** JAVASCRIPT ********************->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQn4" F86dIHz0 = " script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM + B07jRM" crossorigin = ""
<script type = "text/javascript" src = "js/slick.min.js"></script>
<script type = "text/javascript" src = "js/script.js"></script>
<!-******************** JAVASCRIPT ********************->
</body>
</html>
item01.css
@charset "utf-8";
main {
display: block;
}
main.container {
padding-top: 15px;
}
Related questions
- html - boostrap does not apply
- html - bootstrap container doesn't work (padding doesn't work)
- css3 - will the description of the old version be deleted when the new version comes out?
- html - offset does not apply
- javascript - i want to fix the icon at the right end of the html text box and display it
- html : Make two columns, two columns and one solid at the bottom when adaptive
- html - child element is not included in parent element
- html - the specification at the time of xs does not work in bootstrap
- css3 - i am making a slide show the path is fine and the slides are working but the image doesn't look good so i want to be able
- html - elements are automatically broken in bootstrap's grid system
The
overflow-x
property is not working as expected because themax-width
property is not applied below576pxIs the cause. By settingwidth
property for.main-content
class, I think that the problem that the table protrudes with a narrow screen width can be solved. Link).