Question

我不确定它是否有所作为，但这个问题与Windows 8应用程序中的HTML5有关。

我有以下输入表格：

<div class="input-form">
    <form id="myData" >
        <table>
            <tr>
                <td>Data1</td>
                <td><input type="text" title="data1" id="data1" value="test" required /></td>
            </tr>
            <tr>
                <td>Data2</td>                            
                <td>
                    <div>
                       <input type="text" title="data2" id="data2" />
                       <button id="lookup">...</button>
                    </div>
                </td>
            </tr>
...

这个想法是用户点击省略号并发生某些事情（帮助他们输入数据）。这工作正常，但是，在Windows 8应用程序中，您必须满足快照模式。所以这是我目前处理的CSS样式：

@media screen and (-ms-view-state: snapped) {
.homepage section[role=main] {
    margin-left: 20px;
}

.input-form {
    width:320px;        
}

这给了我的只是表格的第二列 - 这很好，但是对于带有省略号的字段，我希望能够看到省略号。我尝试了各种各样的事情：在两个字段上设置宽度，设置表格宽度，但无论我做什么，似乎没有什么区别。

我知道有人会告诉我，使用桌子是一件坏事，我会被判处第七圈的地狱或者其他东西;但在我使用桌子之前，我尝试了各种其他方法，但没有一种能给我带来我想要的桌面效果。

所以我的问题是，我如何设置表格的样式;或者，如果不可能，我如何格式化HTML以使其显示为表格？

编辑：

只是为了澄清我尝试了其他方法：

<div class="input-form">                    
    <form id="mailData" >
        <div id="input-left">
            <div>Data1</div>
            <div>Data2</div>
        </div>

        <div id="input-centre">
            <div><input type="text" title="data1" id="data1" value="test" required /></div>
            <input type="text" title="data2" id="data2" />                                                                    
        </div>

        <div id="input-right">
            <div></div>
            <button id="lookup">...</button>
        </div>
    </form>

那样的造型：

.input-form {    
margin-left:320px;
display:-ms-grid;
-ms-grid-rows:1fr;
-ms-grid-columns:auto auto auto;
height:100%;
}

#input-left {
-ms-grid-column: 1;
}

#input-centre {
-ms-grid-column: 2;
}

#input-right {
-ms-grid-column: 3;
}

这只显示带有Data1的表单，Data2标签后跟输入框。

Answer 1

这是一个很好的例子，使用Blend for Visual Studio可能会让您的生活更轻松。 Blend允许您以可视方式处理页面上的元素和适用于它们的CSS样式，因此您可以立即看到给定规则的影响。 Blend还支持（通过“设备”窗格）在4种已定义的视图状态中查看您的内容，包括快照视图，这样您就可以立即判断您的规则是否正在按照您的要求执行。

这里有一些documentation for designing HTML apps in Blend可以帮助您入门。

虽然我不会把你交给任何使用表格的地狱圈子（使用表格进行布局往往是自我惩罚），我建议你看看CSS3 Grid layout和{{ 3}}文档，为表格元素的布局提供了几个很好的替代方案。

还有一个CSS3 Flexible Box layout您可能会觉得有帮助。

有关Windows应用商店应用开发的详细信息，请注册Quickstart on defining app layouts。

Answer 2

HTH。

示例html：

<div class="inputs form">
    <div class="property data1">
        <h2 class="caption">Data1</h2>
        <input type="text" placeholder="Enter value here" required="required"/>
    </div>
    <div class="property data2">
        <h2 class="caption">Data2</h2>
        <input type="text" placeholder="Enter value here" />
        <button type="button">...</button>
    </div>
</div>

示例css：

.inputs.form
{
    display: -ms-flexbox;
    -ms-flex-direction: column;
}

.inputs.form .property
{
    display: -ms-grid;
    -ms-grid-columns: auto auto auto;
}

    .inputs.form .property .caption
    {
        -ms-grid-row-align: center;
        padding: 0 20px 0 0;
    }

    .inputs.form .property input
    {
        -ms-grid-column: 2;
    }

    .inputs.form .property button
    {
        -ms-grid-column: 3;
        min-width: 0;
    }

将CSS样式应用于HTML表

2 个答案: