要从表td继承的文本框宽度

Question

我正在尝试将文本框宽度与其父表格单元格相同。

适用的CSS如下：

input[type=text] {
    border: 1px solid #3c6f91;
    font: 9pt arial, tahoma, verdana sans-serif;
    width: 100%;
}

.gv {
    border: solid #3c6f91 1px;
}

.gv td {
    border: solid #3c6f91 1px;
    white-space: nowrap;
}

该表由ASP.NET GridView呈现，其中包含以下内容：

<table class="gv" cellspacing="0" rules="all" border="1" id="cph_cphPCR_gv" style="border-collapse:collapse;">

这就是它的样子：

这就是我想要做的事情：

第二张图片是当桌子伸展到不适合屏幕的时候。 我尝试了width: auto;，width: inherit;，table-layout: fixed;，搜索了很多答案，但未能找到答案。我很确定，这不是保证金/填充问题......

编辑：http://jsfiddle.net/cN24t/ 第一个表格，当它比屏幕更宽时，这就是我喜欢的文本框＆＃39;宽度

Answer 1

这就是诀窍：

.gv td {
    border: solid #3c6f91 1px;
    white-space: nowrap;
    width: 1px;
}

Answer 2

试试这个：

<table class="gv" cellspacing="0" cellpadding="0" rules="all" border="1" id="cph_cphPCR_gv" style="border-collapse:collapse;">

您还可以尝试在将来使用CSS reset来帮助摆脱不一致。

Answer 3

在表格列宽中按内容自动设置，width:100%;这里不是一个好选择。我建议严格设置文本区域大小（以像素为单位）。 BTW，textarea可以由用户调整大小，并且可能会浪费您的设计。所以，我建议设置为textarea：width，min-width和max-width，以像素为单位。