I have a div that wraps a table and I added width:max-content to it so that scrollbar will stick to the side of the table whatever width it gets based on it's content. It works well on Chrome but doesn't work the same with Firefox (94.0.1). Is there a different way to do this in Firefox?
I also tried adding white-space: nowrap but horizontal scrollbar appears.
Here is my CSS and html (I am using bootstrap):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SAMPLE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.form-container {
font-size: 16px !important;
margin: 20px auto;
font-family: auto !important;
}
.div-container {
font-size: 16px !important;
margin-bottom: 15px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
min-height: 12px;
border-width: 1px;
border-style: solid;
}
h3{
font-size: 30px;
}
.tableDiv { overflow-y: auto; max-height: calc(90vh - 210px); width: auto; max-width: 100%;}
#supports(width: max-content){
.tableDiv { overflow-y: auto; max-height: calc(90vh - 210px); width: max-content; width: -moz-max-content; max-width: 100%;}
}
table {
width: auto !important;
text-align: center;
border-collapse: separate;
border-spacing: 0;
}
.margin-bottom-sm{
margin-bottom: 1px;
}
table th {
border-top: 1px solid;
border-bottom: 1px solid;
border-right: 1px solid;
}
.tableDiv thead th {
position: sticky;
top: 0;
z-index: 1;
background-color: #fefefe;
}
</style>
</head>
<body>
<div style="width: 1536px;">
<div class="form-container">
<div class="div-container">
<div style="padding-bottom: 15px">
<h3><strong>SAMPLE PAGE</strong></h3>
</div>
<div class="tableDiv" style="display: inline-block;" >
<table class="table table-bordered margin-bottom-sm">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Company</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> Company Name 0</td>
</tr>
<tr>
<td>2</td>
<td> Company Name 1</td>
</tr>
<tr>
<td>3</td>
<td> Company Name 2</td>
</tr>
<tr>
<td>4</td>
<td> Company Name 3</td>
</tr>
<tr>
<td>5</td>
<td> Company Name 4</td>
</tr>
<tr>
<td>6</td>
<td> Company Name 5</td>
</tr>
<tr>
<td>7</td>
<td> Company Name 6</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Chrome:
Firefox (94.0.1):
It's a valid bug related to oveflow:auto. Refer https://bugzilla.mozilla.org/show_bug.cgi?id=764076
Here is the clear minimal reproducible example. Behaves different on Chrome and Firefox.
They are implementing scrollbar-gutter property which will fix this.
For now, you can use overflow-y: scroll; on Firefox.
.tableDiv {
overflow-y: scroll; /* <-- show scroll */
max-height: calc(90vh - 210px);
width: auto;
max-width: 100%;
}
#supports(width: max-content) {
.tableDiv {
overflow-y: scroll; /* <-- show scroll */
max-height: calc(90vh - 210px);
width: max-content;
width: -moz-max-content;
max-width: 100%;
}
}
This discussion might help for making it browser specific.
Note: overflow-y: scroll will always show scroll bar, even if content is smaller than the container size.
Related
I'm searching for a pure-CSS solution to make tables behave in the following way:
if the content
the table should always fill the width of its container, with cells distributing horizontally
the table should scroll horizontally if its content is wider than the width of the container
If I use
table {
width: 100%
}
it will work fine for tables whose content is shorter than the width of the content, whether if I use
table {
width: 100%;
display: block;
overflow: auto;
}
will work fine with tables whose content is larger than the width of the content. Is there a way to make the table behave in both ways?
I hope it's easier to understand with an example:
body {
font-family: sans-serif
}
h3 {
margin-top: 30px;
}
p {
font-style: italic;
margin-top: 4px;
}
div#container {
width: 600px;
border: 2px solid blue;
padding: 20px;
overflow: hidden;
}
table {
border: 1px solid red;
}
thead {
background-color: #ddd;
}
td {
padding: 5px;
}
table.fullwidth {
width: 100%;
}
table.displayblock {
width: 100%;
display: block;
overflow: auto;
}
table::-webkit-scrollbar {
-webkit-appearance: none;
}
table::-webkit-scrollbar:horizontal {
height: 11px;
}
table::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<table class="fullwidth">
<thead>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
</tbody>
</table>
<p>Tables with short contents shoould behave like this.</p>
<table class="displayblock">
<thead>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
</thead>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
</table>
<p>Tables with long contents should behave like this.</p>
</div>
</body>
</html>
In the example I used two different styles. Is it possibile to obtain the same effect with just one style?
Thank you!
i fixed your html as your are using individual tables for each row instead of using the standard. TR which stands for Table Row
Then i used flex box to position and align items inside the box.
if you want to predefine for mobile you have to use media queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
h3 {
margin-bottom: 0;
}
#container {
width: 90vw;
border: 2px solid blue;
overflow: hidden;
/*position container in the middle of page*/
margin: 0 auto;
}
table {
/*position center*/
margin: 0 auto;
border: 2px solid red;
padding: 2.5vh 3vw;
width: 84vw; /*container width - padding*/
}
tr {
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
border: 2.5px solid black;
}
td {
/*width 33% of parent*/
width: 100%;
/*center text in box*/
display: flex;
justify-content: center;
align-items: center;
/*fit inside box*/
word-break: break-all;
/*see table cells*/
background: #fff333;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=1">
<title></title>
</head>
<body>
<div id="container">
<table>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
</table>
</div>
</body>
</html>
I'm trying to accomplish align numbers horizontally center in the box but with the digits right aligned like in this image:
If you think i should try different method please suggest me.
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
th,td {
padding: 2px 5px 2px 5px;
text-align: center;
}
span {
display: inline-block;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>10</span></td>
</tr>
<tr>
<td><span>11</span></td>
</tr>
<tr>
<td><span>12</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Number will be dynamic (Between one to four characters)
I added borders so you can see how I did it.
Align the td content to center.
Align the td > span content to right, at give it small width.
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
td {text-align: center; border: 1px solid red;}
td span {
padding: 0;
text-align: right;
border: 1px solid blue;
width: 31px;
}
span {
display: inline-block;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>10</span></td>
</tr>
<tr>
<td><span>1122</span></td>
</tr>
<tr>
<td><span>112</span></td>
</tr>
</tbody>
</table>
</body>
</html>
In addition to the solution above, I have to say that for this case, it could be a good idea to use a monospace font.
Another option that doesn't need setting explicit size (so will work with any font and/or digits number):
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
tbody tr:nth-child(odd) { background: #eee; }
th,td {
padding: 2px 5px 2px 5px;
text-align: right;
}
tbody tr::before, tbody tr::after {
content: '';
display: table-cell;
width: 50%;
}
<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</tbody>
</table>
</body>
</html>
The trick is in adding two "pseudo cells" to each row that take half the available width each.
I went through the same problem and came across the following suggestions which I dont find to be optimal
Use extra padding on both sides of the column (what about responsiveness?)
Use extra columns (semantics anyone?)
Put a table inside a td (performance anyone?)
After going through every nook and corner, I believe I have the optimal solution to this problem
Flexbox to the rescue!!!
Simple trick: Just add a span inside a td that acts as a flexbox container and has 2 span children with both your content pieces inside. Your column could be any size and this still works like a charm!
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
html, body{
width: 100vw;
min-height: 100vh;
}
body{
display: flex;
flex-direction: column;
}
#content{
flex: 1;
display: flex;
flex-direction: row;
}
#left, #right{
flex: 2;
}
#center{
flex: 6;
}
table{
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
table th,
table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #e9ecef;
}
table thead th {
vertical-align: bottom;
border-bottom: 2px solid #e9ecef;
}
td{
text-align: center;
}
span.left{
flex: 1;
background: lightcoral;
text-align: right;
}
span.right{
flex: 1;
background: lightblue;
text-align: left;
}
.flexwrap{
display: flex;
flex-direction: row;
}
</style>
<body>
<div id= "content">
<div id = "left"></div>
<div id = "center">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>Item 1</td>
<td>
<span class="flexwrap">
<span class = 'left'>
13737
</span>
<span class = 'right'>
.9
</span>
</span>
</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>
1
</td>
<td>Item 2</td>
<td>
<span class="flexwrap">
<span class = 'left'>
2
</span>
<span class = 'right'>
.34000004
</span>
</span>
</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
</table>
</div>
<div id = "right"></div>
</div>
</body>
I colored the spans so that you can see them in the output. Hope that helps
I want to make my table to keep 50% size of the body and not to out of range of the page size,but when I resize to mobile size like 350px or smaller ,it will out of range.how to solve this ?thanks
View post on imgur.com
css code
<style type="text/css">
body{
padding-top: 10px;
padding-left: 10px;
width: 100%;
}
.scrolltable {
overflow-x: visible;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.scrolltable > .header {
}
.scrolltable > .body {
/*noinspection CssInvalidPropertyValue*/
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
box-shadow: 10px 10px 5px #888888;
}
/* an outside constraint to react against */
#constrainer {
float: right;
margin-right: 80px;
width: 50%;
height:250px;
}
table {
font-size:22px;
border-collapse: collapse;
}
th, td {
border-radius:25px;
min-width:120px;
}
th {
color: white;
border-width: 1px;
font-weight: bold;
background-color:#3986d3;
padding-top: 5px;
padding-bottom: 5px;
}
td {
border-width: 1px;
text-align:center;
padding-top: 5px;
padding-bottom: 5px;
}
tr:first-child td {
border-top-width: 0;
}
tr:nth-child(even) {
background-color:#f2f2f2 ;
}
tr:hover{background-color:#BEBEBE}
</style>
HTML below
<body>
<div id="constrainer">
<div class="scrolltable">
<table class="header">
<thead>
<th>
工位
</th>
<th>
位置
</th>
<th>
速度
</th>
<th>
加速度
</th>
<th>
減速度
</th>
<th>
加加速度
</th>
</thead>
</table>
<div class="body">
<table>
<tbody>
<tr>
<td>原點</td>
<td id="inp01"></td>
<td id="inp02"></td>
<td id="inp03"></td>
<td id="inp04"></td>
<td id="inp05"></td>
</tr>
<tr>
<td>01</td>
<td id="inp11"></td>
<td id="inp12"></td>
<td id="inp13"></td>
<td id="inp14"></td>
<td id="inp15"></td>
</tr>
<tr>
<td>02</td>
<td id="inp21"></td>
<td id="inp22"></td>
<td id="inp23"></td>
<td id="inp24"></td>
<td id="inp25"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button id="btnright1" style="width:50px; height:50px;" />
<div style="margin-left:100px;">
<p>速度</p> <input id="setSpeed" type="number" style="width:100px; height:30px; border-radius: 20px; " />
</div>
</body>
Updated you code..I am guessing that is what you wanted.
you should also use the viewport meta tag in you head to control layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"/>
body {
padding-top: 10px;
padding-left: 10px;
}
.scrolltable {
height: 50vh;
overflow-x: visible;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.scrolltable > .header {} .scrolltable > .tbody {
/*noinspection CssInvalidPropertyValue*/
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
box-shadow: 10px 10px 5px #888888;
}
/* an outside constraint to react against */
table {
font-size: 90%;
border-collapse: collapse;
}
th,
td {
border-radius: 25px;
width: 120px;
}
th {
color: white;
border-width: 1px;
font-weight: bold;
background-color: #3986d3;
padding-top: 5px;
padding-bottom: 5px;
}
td {
border-width: 1px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
tr:first-child td {
border-top-width: 0;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #BEBEBE
}
<body>
<div id="constrainer">
<div class="scrolltable">
<table class="header">
<thead>
<th>
工位
</th>
<th>
位置
</th>
<th>
速度
</th>
<th>
加速度
</th>
<th>
減速度
</th>
<th>
加加速度
</th>
</thead>
</table>
<div class="tbody">
<table>
<tbody>
<tr>
<td>
原點
</td>
<td id="inp01">
</td>
<td id="inp02">
</td>
<td id="inp03">
</td>
<td id="inp04">
</td>
<td id="inp05">
</td>
</tr>
<tr>
<td>
01
</td>
<td id="inp11">
</td>
<td id="inp12">
</td>
<td id="inp13">
</td>
<td id="inp14">
</td>
<td id="inp15">
</td>
</tr>
<tr>
<td>
02
</td>
<td id="inp21">
</td>
<td id="inp22">
</td>
<td id="inp23">
</td>
<td id="inp24">
</td>
<td id="inp25">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="btnright1" style="width:50px; height:50px;" />
<div style="margin-left:100px;">
<p>速度</p>
<input id="setSpeed" type="number" style="width:100px; height:30px; border-radius: 20px; " />
</div>
</div>
</body>
You should learn about media-queries
So i don't know what is possible layout you wan't but i'll show you the result what i did using media queries.
Queries.css
/* Small phones: from 0 to 480px */
#media only screen and (max-width: 480px) {
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
table{
font-size: 10px !important;
margin-left: 80px;
}
scrolltable > .body {
/*noinspection CssInvalidPropertyValue*/
width: 100% !important;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
box-shadow: 10px 10px 5px #888888;
}
#constrainer {
width: 100% !important;
}
#btnright1{
margin:30px 0;
}
}
As Other person told you have to read media queries for sure. And try read bootstrap for the Responsive this was one was real easy to understand
This was the syntax for media query
#media not|only mediatype and (media feature) {
CSS-Code;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I'm trying have a table adjust its width and the width of its cells when the div it's contained it resizes. So when the frame width is reduced, the table width is reduced, keeping all cells equal-sized.
<div id="page">
<table id="menubar">
<tbody>
<tr>
<td class="menu">MenuItem1</td>
<td class="menu">MenuItem2</td>
<td class="menu">MenuItem3</td>
</tr>
</tbody>
</table>
</div>
My CSS looks like:
#page {
background-color: #f0eae3;
max-width: 960px;
min-width: 450px;
margin: auto;
}
.menu {
background-color: #ffffff;
text-align: center;
width: 310px;
}
#menubar {
width: 960px
}
It's probably really easy.
You need to change #menubars width to 100% to ensure the table takes up 100% of the container #page. If you don't want the table to be bigger than 960px you can set max-width to 960px to stop it from expanding too far.
#page {
background-color: #f0eae3;
max-width: 960px;
min-width: 450px;
margin: auto;
}
#menubar {
max-width: 960px;
width: 100%;
}
.menu {
background-color: #ffffff;
text-align: center;
max-width: 310px;
}
<div id="page">
<table id="menubar">
<tbody>
<tr>
<td class="menu">MenuItem1</td>
<td class="menu">MenuItem2</td>
<td class="menu">MenuItem3</td>
</tr>
</tbody>
</table>
</div>
you have so
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
It must be so
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
http://jsfiddle.net/njhqfnut/
#page {
background-color: #f0eae3;
max-width: 960px;
min-width: 450px;
margin: auto;
}
.menu {
background-color: #ffffff;
text-align: center;
width: 310px;
}
#menubar {
max-width: 960px
}
<div id="page">
<table id="menubar">
<tbody>
<tr>
<td class="menu">MenuItem1</td>
<td class="menu">MenuItem2</td>
<td class="menu">MenuItem3</td>
</tr>
</tbody>
</table>
</div>
I have a table that can slide left or right when the screen is narrow enough. The first column is positioned absolute so that it is always visible.
Is it possible to make the cells in the first column maintain the size of the cells in the other columns? I am not sure how to achieve this while keeping the first column frozen.
Here is a fiddle to my code: http://jsfiddle.net/ta945/
Here's the HTML and CSS
HTML:
<div>
<table>
<thead>
<tr>
<th class="sticky">Name</th>
<th>Helpful Services</th>
<th>State</th>
<th>City</th>
<th>Phone</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">First Name</td>
<td>Math</td>
<td>CO</td>
<td>San Francisco</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Second Name</td>
<td>Reading</td>
<td>NY</td>
<td>New York City</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Third Name</td>
<td>Art</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Four Name</td>
<td>Programming</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
width: 100%;
border: 1px solid #000000;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: seperate;
border-spacing: 0;
margin-left: 5em;
}
thead, tbody, tr {
vertical-align: middle;
}
th {
font-weight: bold;
padding: 2px 4px;
background-color: #676767;
color: #FFFFFF
}
td {
padding: 2px 4px;
}
tbody tr:nth-child(even) td {
background-color: #cccccc;
}
.sticky {
position: absolute;
left: 0;
top: auto;
margin-left: 9px;
}