[英]Covert to Table to css (div)
I would like to convert this design from Table structure into Divs/CSS. 我想将此设计从Table结构转换为Divs / CSS。 I spent so many times to redo the design on CSS but still stuck!!
我花了很多时间在CSS上重做设计,但是仍然卡住了! The idea is to create time table but I used table in my web form instead of Divs.
想法是创建时间表,但我在Web表单中使用了表格而不是Divs。 I was trying to redesign but nothing worked for me... Any help would be much appreciated
我正在尝试重新设计,但对我没有任何帮助...非常感谢您的帮助
<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"> </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">
</td>
<td class="auto-style24"></td>
</tr>
</table>
Try using CSS tables: http://snook.ca/archives/html_and_css/getting_your_di 尝试使用CSS表: http : //snook.ca/archives/html_and_css/getting_your_di
You can make divs behave like tables by using display: table
and display: table-cell
. 您可以使用
display: table
和display: table-cell
使div表现得像表。
With HTML table elements: 使用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>
With CSS tables: 使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.