如何在HtmlTable单元格中获取标签？ [英] How can I get a label in an HtmlTable cell to wrap?
问题描述
我有一个HtmlTable单元格，我想要小，宽度方面。它有一个标签Total Expenses，我想要两行，但我试图强迫它包装的所有东西都没有用。这是html：
I have an HtmlTable cell that I want to be small, width-wise. It has a label "Total Expenses" that I want on two lines, but everything I've tried to force it to wrap has not worked. Here's the html:
<td width="40" class="skybluebackground centertext"><label class="wrappable">Total Expenses</label></td>
...其他行在该列中有这样的单元格（数字输入元素）：
...other rows have cells like this in that column (number input elements):
<td width="40"><input width="40" type="number" step="0.01" min="0" name="airfareTotalExpense" id="airfareTotalExpense"/></td>
尝试减少这些数字输入元素的宽度也失败了。
我试过的CSS：
Trying to reduce the width of those number input elements fails, too.
The CSS I've tried:
.wrappable {
/*word-wrap: normal;*/
float:left;
width: 40px;
}
I尝试设置其他几个属性，但显然没有任何效果。
I tried setting several other properties, too, but obviously nothing worked.
推荐答案
首先，您需要了解默认情况下单元格的大小td由其内部HTML定义。如果这是文本，它将被包装为任何其他文本;你不需要任何东西，除了限制这个元素的宽度，然后内部内容将尝试适合它。同样适用于标签。
但是，输入不起作用，因为它总是一条线。而不是输入，你必须使用textarea。
在下面的例子中，为了说明，我使用了td，包括限制和默认大小，以及可见性，添加边框，填充，以及tablewidth 100％，所以你可以看到如果你改变浏览器窗口的宽度会发生什么：
First of all, you need to understand that, by default, the size of the celltdis defined by its inner HTML. If this is text, it will be wrapped as any other text; you don't need anything except limiting the width of this element, then the inner content will try to fit it. The same goes forlabel.
With input, however, it won't work, because it is always one-line. Instead ofinput, you have to usetextarea.
In my example below, for illustration, I usedtdwith both limited and default size, and for visibility, added border, padding, and made thetablewidth 100%, so you could see what happens if you change the width of the browser window:
<html>
<head>
<style>
table { width:100%; }
td { border: solid thin black; padding: 1em; }
td.wrappable { width: 10em; }
</style>
</head>
<body>
<table><tr>
<td class="wrappable">This text should be wrappable</td>
<!-- or it can be <label>This text should be wrappable</label> -->
<td>1.2</td>
</tr>
<tr>
<td class="wrappable"><textarea>some content</textarea></td>
<td>2.2</td>
</tr></table>
</body>
</html>
顺便说一下，我强烈建议你戒掉使用任何与风格相关的属性的习惯，可能除了 class 。相反，总是使用CSS。此外，对于大多数应用程序，相对单位，如em优于绝对单位（像素）。
问题解决了。
By the way, I strongly advise you to quit the habit of using any style-related attributes except, perhaps, class. Instead, always use CSS. Also, for most applications, relative units, such as "em" are preferable over absolute units (pixels).
The problem is solved.
这篇关于如何在HtmlTable单元格中获取标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
