Maison > interface Web > tutoriel HTML > 请教下关于table的宽度问题_html/css_WEB-ITnose

请教下关于table的宽度问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:46:12
original
802 Les gens l'ont consulté

<table width="960" height="200" border="1" align="center" bordercolor="#0033CC" style="border-collapse:collapse" >  <tr>    <th height="50" colspan="5" scope="col"><div align="center"><a href="http://www.15fj.com/" class="STYLE1">2013年-2014年国家法定节假日放假安排/通知</a></div></th>  </tr>  <tr>    <td width="123" height="20">节日</td>    <td width="261" height="20" >放假日期</td>    <td width="246" height="20">调休上班日期</td>    <td width="141"  height="20">放假天数</td>    <td width="163" rowspan="10" >《<a href="http://www.fangjiaanpai.cn/">2014年放假安排时间表</a>》放假安排方案是依据国务院《关于修改全国年节及纪念日放假办法的决定》,参照往年国务院办公厅往年下达的关于部分节假日安排的通知,结合当前工作实际,在坚持科学发展观重要思想指导下做出的。2014年节假日放假安排方案须报请国务院批准方可生效,最终方案将于2013年底予以公布,届时国务院办公厅将以通知的方式下达。以便相关单位及早合理安排节假日旅游、交通运输、生产经营等有关工作,本站现在方案仅供参考!</td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/zhongqiu/" class="STYLE4" >2013中秋</a> </td>    <td >1月1日 - 3日(周二、三、四) </td>    <td>1月5日(周六)、1月6日(周日</td>    <td>3天</td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/guoqing/" class="STYLE4" >2013国庆</a> </td>    <td> 2月9日 - 15日(周六→周五) </td>    <td> 2月16日(周六)、2月17日(周日) </td>    <td> 7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/yuandan/" class="STYLE4"  >2014元旦</a> </td>    <td> 4月4日 - 6日(周四、五、六) </td>    <td> 4月7日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/chunjie/" class="STYLE4" >2014春节</a> </td>    <td> 4月29日 - 5月1日(周一、二、三) </td>    <td> 4月27日(周六)、4月28日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/qingmin/" class="STYLE4">2014清明节</a> </td>    <td> 6月10日 - 12日(周一、二、三) </td>    <td> 6月8日(周六)、6月9日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/laodong/" class="STYLE5" >2014五一劳动节</a> </td>    <td>9月19日 - 21日(周四、五、六) </td>    <td>9月22日(周日) </td>    <td>3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/duanwu/" class="STYLE5" >2014端午节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/zhongqiu/" class="STYLE5">2014中秋节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fanjiaanpai.cn/" class="STYLE5">2014国庆节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  </table>
Copier après la connexion



请教下怎么才能控制表格的宽度 我修改也没效果,另外怎么才以让里面的字体不换行?谢谢
图片上传不了,就是每个表格他宽度现在都是一样的,没法修改,我修改了宽度也没效果


回复讨论(解决方案)

<style>	td{word-break: keep-all; white-space:nowrap;}		td.break{ word-wrap: break-word; word-break: normal; white-space: normal }</style><table width="960" height="200" border="1" align="center" bordercolor="#0033CC" style="border-collapse:collapse" >  <tr>    <th height="50" colspan="5" scope="col"><div align="center"><a href="http://www.15fj.com/" class="STYLE1">2013年-2014年国家法定节假日放假安排/通知</a></div></th>  </tr>  <tr>    <td width="123" height="20">节日</td>    <td width="261" height="20" >放假日期</td>    <td width="246" height="20">调休上班日期</td>    <td width="141"  height="20">放假天数</td>    <td width="163" rowspan="10" class="break" >《<a href="http://www.fangjiaanpai.cn/">2014年放假安排时间表</a>》放假安排方案是依据国务院《关于修改全国年节及纪念日放假办法的决定》,参照往年国务院办公厅往年下达的关于部分节假日安排的通知,结合当前工作实际,在坚持科学发展观重要思想指导下做出的。2014年节假日放假安排方案须报请国务院批准方可生效,最终方案将于2013年底予以公布,届时国务院办公厅将以通知的方式下达。以便相关单位及早合理安排节假日旅游、交通运输、生产经营等有关工作,本站现在方案仅供参考!</td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/zhongqiu/" class="STYLE4" >2013中秋</a> </td>    <td >1月1日 - 3日(周二、三、四) </td>    <td>1月5日(周六)、1月6日(周日</td>    <td>3天</td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/guoqing/" class="STYLE4" >2013国庆</a> </td>    <td> 2月9日 - 15日(周六→周五) </td>    <td> 2月16日(周六)、2月17日(周日) </td>    <td> 7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/yuandan/" class="STYLE4"  >2014元旦</a> </td>    <td> 4月4日 - 6日(周四、五、六) </td>    <td> 4月7日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/chunjie/" class="STYLE4" >2014春节</a> </td>    <td> 4月29日 - 5月1日(周一、二、三) </td>    <td> 4月27日(周六)、4月28日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/qingmin/" class="STYLE4">2014清明节</a> </td>    <td> 6月10日 - 12日(周一、二、三) </td>    <td> 6月8日(周六)、6月9日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/laodong/" class="STYLE5" >2014五一劳动节</a> </td>    <td>9月19日 - 21日(周四、五、六) </td>    <td>9月22日(周日) </td>    <td>3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/duanwu/" class="STYLE5" >2014端午节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/zhongqiu/" class="STYLE5">2014中秋节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fanjiaanpai.cn/" class="STYLE5">2014国庆节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  </table>
Copier après la connexion
Copier après la connexion

<style>	td{word-break: keep-all; white-space:nowrap;}		td.break{ word-wrap: break-word; word-break: normal; white-space: normal }</style><table width="960" height="200" border="1" align="center" bordercolor="#0033CC" style="border-collapse:collapse" >  <tr>    <th height="50" colspan="5" scope="col"><div align="center"><a href="http://www.15fj.com/" class="STYLE1">2013年-2014年国家法定节假日放假安排/通知</a></div></th>  </tr>  <tr>    <td width="123" height="20">节日</td>    <td width="261" height="20" >放假日期</td>    <td width="246" height="20">调休上班日期</td>    <td width="141"  height="20">放假天数</td>    <td width="163" rowspan="10" class="break" >《<a href="http://www.fangjiaanpai.cn/">2014年放假安排时间表</a>》放假安排方案是依据国务院《关于修改全国年节及纪念日放假办法的决定》,参照往年国务院办公厅往年下达的关于部分节假日安排的通知,结合当前工作实际,在坚持科学发展观重要思想指导下做出的。2014年节假日放假安排方案须报请国务院批准方可生效,最终方案将于2013年底予以公布,届时国务院办公厅将以通知的方式下达。以便相关单位及早合理安排节假日旅游、交通运输、生产经营等有关工作,本站现在方案仅供参考!</td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/zhongqiu/" class="STYLE4" >2013中秋</a> </td>    <td >1月1日 - 3日(周二、三、四) </td>    <td>1月5日(周六)、1月6日(周日</td>    <td>3天</td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/guoqing/" class="STYLE4" >2013国庆</a> </td>    <td> 2月9日 - 15日(周六→周五) </td>    <td> 2月16日(周六)、2月17日(周日) </td>    <td> 7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/yuandan/" class="STYLE4"  >2014元旦</a> </td>    <td> 4月4日 - 6日(周四、五、六) </td>    <td> 4月7日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/chunjie/" class="STYLE4" >2014春节</a> </td>    <td> 4月29日 - 5月1日(周一、二、三) </td>    <td> 4月27日(周六)、4月28日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/qingmin/" class="STYLE4">2014清明节</a> </td>    <td> 6月10日 - 12日(周一、二、三) </td>    <td> 6月8日(周六)、6月9日(周日) </td>    <td> 3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/laodong/" class="STYLE5" >2014五一劳动节</a> </td>    <td>9月19日 - 21日(周四、五、六) </td>    <td>9月22日(周日) </td>    <td>3天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/duanwu/" class="STYLE5" >2014端午节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fangjiaanpai.cn/zhongqiu/" class="STYLE5">2014中秋节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  <tr>    <td height="15"><a href="http://www.fanjiaanpai.cn/" class="STYLE5">2014国庆节</a> </td>    <td>10月1日 - 7日(周二 ?> 下周一) </td>    <td>9月29日(周日)、10月12日(周六) </td>    <td>7天 </td>  </tr>  </table>
Copier après la connexion
Copier après la connexion


但还有个问题,这样的话 不换行是解决了,现在文字都跑其它格子里去了,表格宽度还是没有变,请教下怎么调控表格宽度 谢谢

最后一个格子里的我又需要他自动换行

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal