在 Visual Studio 2013 年创建表

Question

我正在尝试使用 Visual Studio 2013 中的 div 标记创建表，但问题是在设计视图中我一直将列放在彼此下面而不是在同一行上。

这是我的代码：

            <div id="TM">
               <div class="row" style="background-color:orange">
                   <div class="col-md-2" style="background-color:blueviolet">
                      <label>Supplier</label>
                   </div>

                   <div class="col-md-2" style="background-color:pink" role="textbox"></div>
                   <div class="col-md-3" style="background-color:blueviolet">
                      <label>Estimated Budget</label>
                   </div>
                   <div class="col-md-2" style="background-color:pink">
                      <div class="Textbox" style="height:20px; width:50px" role="textbox"></div>
              </div>                            
           </div>

Answer 1

您可能想看看这个 http://www.w3schools.com/html/html_layout.asp 以便显示 div 就好像它们是平板电脑一样您必须了解 html 和 css 正确，浮动在正确的位置。鉴于您上面的代码，下面应该可以工作。请注意，在生产代码中，您确实应该尽可能地将 "Style" 元素重新分解为 CSS 样式表。

    <div id="TM">
           <div class="row" style="background-color:orange">
               <div class="col-md-2" style="background-color:blueviolet; float:left;">
                  <label>Supplier</label>
               </div>

               <div class="col-md-2" style="background-color:pink; float:left;" role="textbox"></div>
               <div class="col-md-3" style="background-color:blueviolet; float:left;">
                  <label>Estimated Budget</label>
               </div>
               <div class="col-md-2" style="background-color:pink; float:left;">
               <div class="Textbox" style="height:20px; width:50px; float:left;" role="textbox"></div>
          </div>
       </div>

Answer 2

为什么要强制 div 显示表格数据？这是一个非常糟糕的做法，你真的不应该那样做。不要低估语义。每次你有一个表格数据，你应该使用 <table>.

标签 <table> 只有在您使用它来定义网站布局时才应避免，因为它会导致有问题的场景和非常笨拙的设计。然而，在这种情况下，当您显然使用表格数据并试图通过强制 div 进行 table 设计来重新发明轮子时，<table> 是一个真正的方法。

更多注意事项：

Visual studio 中的所见即所得编辑器是 suitable 实际上仅用于快速原型制作，但不应用于实际布局 Web 应用程序。手写html
尽量避免内联样式。尽可能使用外部 css 文件，除非你想运行将来遇到很多问题。您当前的代码将是维护的噩梦..

在 Visual Studio 2013 年创建表

Creating tables in Visual Studio 2013

html

css-tables

twitter-bootstrap

visual-studio-2013