將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。