html - 转换为表到 css (div)

Question

我想将此设计从表结构转换为 Divs/CSS。我花了很多次在 CSS 上重做设计，但仍然卡住了!我的想法是创建时间表，但我在我的网络表单中使用了表格而不是 Divs。我试图重新设计，但对我没有任何帮助...... 任何帮助将不胜感激

<style type="text/css">
    .auto-style3 {
        color: #3366CC;
    }
    .auto-style7 {
        width: 314px;
        text-align: center;
        font-weight: 700;
        text-decoration: underline;
        color: #3366CC;
    }
    .auto-style13 {
        width: 314px;
        text-align: center;
        color: #3366CC;
    }
    .auto-style14 {
        width: 299px;
        text-align: center;
        color: #3366CC;
        text-decoration: underline;
    }
    .auto-style15 {
        text-decoration: underline;
    }
    .auto-style16 {
        width: 314px;
        text-align: center;
        height: 22px;
        font-weight: 700;
    }
    .auto-style17 {
        height: 30px;
    }
    .auto-style19 {
        height: 40px;
    }
    .auto-style21 {
        width: 299px;
        text-align: left;
        height: 40px;
    }
    .auto-style22 {
        font-weight: normal;
    }
    .auto-style24 {
        width: 314px;
        text-align: center;
        font-weight: 700;
        height: 39px;
    }
    .auto-style26 {
        width: 314px;
        text-align: center;
        font-weight: 700;
        height: 40px;
    }
    .auto-style28 {
        width: 314px;
        text-align: center;
        font-weight: 700;
        height: 116px;
    }
    .auto-style29 {
        width: 314px;
        text-align: center;
        font-weight: 700;
        height: 153px;
    }
    .auto-style30 {
        width: 299px;
        text-align: center;
        font-weight: 700;
        height: 116px;
    }
    .auto-style31 {
        width: 299px;
        text-align: center;
        height: 22px;
        font-weight: 700;
    }
    .auto-style32 {
        width: 299px;
        text-align: center;
        font-weight: 700;
        height: 153px;
    }
    .auto-style33 {
        width: 299px;
        text-align: center;
        font-weight: 700;
        height: 40px;
    }
    .auto-style34 {
        width: 299px;
        text-align: center;
        font-weight: 700;
        height: 39px;
    }
    .auto-style35 {
        width: 299px;
        text-align: center;
        color: #333333;
    }
    .auto-style36 {
        font-weight: normal;
        color: #333333;
    }
    .auto-style37 {
        color: #333333;
    }
</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"    
         runat="server">
   <table style="width: 731px">
    <tr>
        <td class="auto-style17" colspan="2"> 
  <h2 style="-webkit-text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);
-moz-text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);
  text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);">Classes Timetable</h2>
            <br />
            <br />
        </td>
    </tr>
    <tr>
        <td class="auto-style17" colspan="2">
                 <p style="text-align: left; color: #666666; line- 
      height:140%; width: 716px;" >
                     Text.</p>
             </td>
    </tr>
    <tr>
        <td class="auto-style14"><strong><b>Text</b></strong></td>
        <td class="auto-style13"><strong><span class="auto-style15">
   <b>Text </b> </span> </strong> </td>
    </tr>
    <tr>
        <td class="auto-style30"><strong>Text; <br />
            </strong><span class="auto-style22">Text<br />
            Text</span><br />
            <br />
        </td>
        <td class="auto-style28"><strong>
            Text<br />
            </strong><span class="auto-style22">Text</span><strong><br />
            Text<br />
            </strong><span class="auto-style22">Text</span>
            <br />
        </td>
    </tr>
    <tr>
        <td class="auto-style31"></td>
        <td class="auto-style16"></td>
    </tr>
    <tr>
        <td class="auto-style31"></td>
        <td class="auto-style16">
            </td>
    </tr>
    <tr>
        <td class="auto-style35"><strong>Text</strong></td>
        <td class="auto-style7"><strong><b>Text</b></strong></td>
    </tr>
    <tr>
        <td class="auto-style32">
            <br />

            <span class="auto-style3"><strong>
            Text</strong></span><span class="auto-style22">Text.</span><span    
                                   class="auto-style3"><strong><br />
            Text</strong></span> <span class="auto-style22">Text</span><br/>
            <span class="auto-style3"><strong>Text</strong></span> <span   
     class="auto-style22">Text</span><br />
            (<a href="ContactUs.aspx">Text</a>)</td>
        <td class="auto-style29">

            <strong>

            <span class="auto-style37">Text</span><span class="auto-style3">
                                <br />
            </span><span class="auto-style36">Text
            <br />
           Text</span><span class="auto-style3"><br />
            </span> </strong><br />
        </td>
    </tr>
    <tr>

        <td class="auto-style21">&nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style19" colspan="2">Text</td>
    </tr>
    <tr>
        <td class="auto-style33">
            <asp:LinkButton ID="LinkButton1" runat="server"      
     OnClick="LinkButton1_Click">Text</asp:LinkButton>
        </td>
        <td class="auto-style26">
            <asp:LinkButton ID="LinkButton2" runat="server" 
   OnClick="LinkButton2_Click">Text</asp:LinkButton>
        </td>
    </tr>
    <tr>
        <td class="auto-style33">
            <asp:LinkButton ID="LinkButton3" runat="server"   
         OnClick="LinkButton3_Click">Text</asp:LinkButton>
        </td>
        <td class="auto-style26">
            <asp:LinkButton ID="LinkButton4" runat="server" 
         OnClick="LinkButton4_Click">Text</asp:LinkButton>
        </td>
    </tr>
    <tr>
        <td class="auto-style33">
            <asp:LinkButton ID="LinkButton5" runat="server" 
          OnClick="LinkButton5_Click">Text</asp:LinkButton>
        </td>
        <td class="auto-style26">
            <asp:LinkButton ID="LinkButton6" runat="server" 
         OnClick="LinkButton6_Click">Text</asp:LinkButton>
        </td>
    </tr>
    <tr>
        <td class="auto-style34">
            &nbsp;</td>
        <td class="auto-style24"></td>
    </tr>
</table>

Answer 1

尝试使用 CSS 表格:http://snook.ca/archives/html_and_css/getting_your_di

您可以使用 display: table 和 display: table-cell 使 div 表现得像表格。

使用 HTML 表格元素:

<table style="width: 731px">
<tr>
    <td class="auto-style17" colspan="2"> 
     <h2 style="-webkit-text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);
         -moz-text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);
         text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);">Classes Timetable</h2>
        <br />
        <br />
    </td>
</tr>
<table>

使用 CSS 表格:

<div style="width: 731px; display: table;">
    <div class="auto-style17" style="display: table-cell;"> 
     <h2 style="-webkit-text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);
         -moz-text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);
         text-shadow: 4px 4px 6px rgba(245, 153, 118, 1);">Classes Timetable</h2>
        <br />
        <br />
    </div>
</div>