如何解决HTML / CSS:文本内容溢出时如何制作段落?更多问题
var array = [1,2,3,4,"666666666666666666666+3=123456678"];
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
table.border = '0';
table.appendChild(tableBody);
function makeArr()
{
var myTableDiv = document.getElementById("myTable1");
tableBody.innerHTML = "";
for(var i=0;i<array.length;i++)
{
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD')
td.width = '275';
td.appendChild(document.createTextNode(array[i]));
tr.appendChild(td);
myTableDiv.appendChild(table);
}
var z = document.getElementById("myTable1");
var tablewidth = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('width');
var tableheight = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('height');
z.style.height = tableheight;
z.style.width = tablewidth;
}
#myTable1,#myTable2{
background: #EEEEEB;
width: 100;
border: none;
float: left;
position: relative;
}
#myTable1 td,#myTable2 td{
text-align: right;
overflow: auto;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button"value="MakeTable"onClick="makeArr()">
<div class="tables" id="tables" >
<div id="myTable1">
</div>
<table id="myTable2">
<th>Always here,same size</th>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
</div>
</body>
大家好! 我希望有人可以帮助我解决几个问题:)
主要目的是使 myTable1 的大小与 myTable2 相同(应该总是相同的尺寸)。如果 myTable1 的宽度溢出,我希望它使用内容创建一个新段落,如果高度溢出,则使其可滚动。 这甚至可以与CSS溢出一起使用(我没有找到任何内容可将内容放在新的段落中)?
-
为什么将666 ... 6显示为666 ... 0以及如何防止显示?
-
如何防止 myTable2 的大小以及 myTable1 的大小发生变化在增加 myTable2 的 th 中的内容量时出错了吗?
-
怎么了,为什么我甚至不能使它滚动?
-
例如,如何在不使用float的情况下将两个表格式化为左侧:因此它离开了身体?
很抱歉有很多问题和困惑...我也非常欢迎其他有用的建议和帮助=)
解决方法
几件事:
- 从
float: left
中删除#myTable1,#myTable2
并将display: flex
添加到.tables
- 将
word-break: break-all
添加到#myTable1 td,#myTable2 td
- 将
overflow: auto
添加到#myTable1,#myTable2
- 您无法使用
table
或tr
使td
,overflow: auto
,scroll
可滚动,您必须在div
,span
上使用它
- 由于您达到最大值 https://www.w3schools.com/jsref/jsref_max_value.asp#:~:text=The%20MAX_VALUE%20property%20returns%20the,MAX_VALUE%20are%20represented%20as%20infinity,您在66666666666666666之后获得了0。
var array = [1,2,3,4,"666666666666666666666+3=123456678"];
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
table.border = '0';
table.appendChild(tableBody);
function makeArr()
{
var myTableDiv = document.getElementById("myTable1");
tableBody.innerHTML = "";
for(var i=0;i<array.length;i++)
{
var tr = document.createElement('TR');
tableBody.appendChild(tr);
var td = document.createElement('TD')
td.width = '275';
td.appendChild(document.createTextNode(array[i]));
tr.appendChild(td);
myTableDiv.appendChild(table);
}
var z = document.getElementById("myTable1");
var tablewidth = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('width');
var tableheight = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('height');
z.style.width = tablewidth;
z.style.height = tableheight;
}
.tables {
display: flex;
}
#myTable1,#myTable2{
background: #EEEEEB;
border: none;
position: relative;
overflow-y: auto
}
#myTable1 td,#myTable2 td{
text-align: right;
word-break: break-all;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button"value="MakeTable"onClick="makeArr()">
<div class="tables" id="tables" >
<div id="myTable1">
</div>
<div id="myTable2">
<table id="myTable2">
<th>Always here,same size</th>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
</div>
</div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。