将CSS样式应用于HTML表格

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; 
} 

这只是显示与数据1，数据2标签的形式接下来是输入框。

Answer 1

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; 
    } 

Answer 2

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

这里有一些documentation for designing HTML apps in Blend帮助你开始。

尽管我不会让你使用任何表格（使用表格进行布局往往是自我惩罚），但我建议你看一下CSS3 Grid layout和CSS3 Flexible Box layout文档，它们提供了一些替代使用表格元素进行布局的替代方案。

还有一个Quickstart on defining app layouts，你可能会发现有帮助。

有关Windows应用商店应用开发的更多信息，请注册App Builder。