Question

CSS

#mainTopicTable
{
  padding:20px; 
}

HTML

  <table width="80%" height="1600px" border="1" align="center"  id="mainTopicTable">

<th width="80%">Topics</th>


  <tr>
    <td > <a href="/PoliticalForum2/Topics/Latest_News.php?topic=Latest_News&start=0" target="_self">Latest News</a> </td>

  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/Political_Beliefs.php?topic=Political_Beliefs&start=0" target="_self">Political Beliefs</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Opinion_Polls.php?topic=Opinion_Polls&start=0" target="_self">Opinion Polls</a></td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Science.php?topic=Science&start=0" target="_self">Science</a>  </td>


  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/Military.php?topic=Military&start=0" target="_self">Military</a> </td>


  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/Religion.php?topic=Religion&start=0" target="_self">Religion</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Healthcare.php?topic=Healthcare&start=0" target="_self">Healthcare</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Transportation.php?topic=Transportation&start=0" target="_self">Transportation</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Education.php?topic=Education&start=0" target="_self">Education</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Immigration.php?topic=Immigration&start=0" target="_self">Immigration</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Future_Technology.php?topic=Future_Technology&start=0" target="_self">Future technology</a> </td>

  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Modern_History.php?topic=Modern_History&start=0" target="_self">Modern History</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Ancient_History.php?topic=Ancient_History&start=0" target="_self">Ancient History</a></td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Political_Systems.php?topic=Political_Systems&start=0" target="_self">Political Systems</a></td>


  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/World_Leaders.php?topic=World_Leaders&start=0" target="_self">World Leaders</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Europe.php?topic=Europe&start=0" target="_self">Europe</a></td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/US.php?topic=US&start=0" target="_self">US</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Eastern_Europe.php?topic=Eastern_Europe&start=0" target="_self">Eastern Europe</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Far_East_Asia.php?topic=Far_East_Asia&start=0" target="_self">Far East Asia</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Central_Asia.php?topic=Central_Asia&start=0" target="_self">Central Asia</a></td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Africa.php?topic=Africa&start=0" target="_self">Africa</a></td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Latin_America.php?topic=Latin_America&start=0" target="_self">Latin America</a> </td>


  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/GeoPolitics.php?topic=GeoPolitics&start=0" target="_self">GeoPolitics</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Human_Geography.php?topic=Human_Geography&start=0" target="_self">Human Geography</a> </td>


  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/Law_Ethics.php?topic=Law_Ethics&start=0" target="_self">Law & Ethics</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Ecology_Politics.php?topic=Ecology_Politics&start=0" target="_self">Ecology & Politics</a> </td>


  </tr>
<tr>
  <td><a href="/PoliticalForum2/Topics/Business_Economics.php?topic=Business_Economics&start=0" target="_self">Business/Economics</a>  </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Media.php?topic=Media&start=0" target="_self">Media</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Social_Inequality.php?topic=Social_Inequality&start=0" target="_self">Social inequality</a> </td>


  </tr>
<tr>
  <td> <a href="/PoliticalForum2/Topics/Off_topic.php?topic=Off_topic&start=0" target="_self">Off-Topic</a> </td>


  </tr>

我不能给桌子填充。我想给表内的内容填充..这样链接就不会粘在单元格上了

重要提示：我使用此链接重置页面：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

是Google样式表..重置css ..它会覆盖我的所有规则..任何想法我可以在开始样式之前获得一个不同的样式表来重置所有css属性？

Answer 1

Quentin是对的，除非您正在显示表格数据，否则永远不需要使用表格。您的代码应如下所示：

<style type="text/css">
    #mainTopicList li{margin-bottom:20px}
</style>

<ul id='mainTopicList'>
    <li>
        <a href="/PoliticalForum2/Topics/Political_Beliefs.php?topic=Political_Beliefs&start=0" target="_self">Political Beliefs</a>
    </li>
    <li>
        <a href="/PoliticalForum2/Topics/Opinion_Polls.php?topic=Opinion_Polls&start=0" target="_self">Opinion Polls</a>
    </li>
    <!-- additional items -->
</ul>

如果必须使用表，则需要将CSS更改为此，尽管20px很多：）

#mainTopicTable td
{
  padding:20px; 
}

Answer 2

将CSS更改为：

#mainTopicTable, #mainTopicTable td {
    border:#000000 solid;
    border-collapse: collapse;  
}

如何使用CSS向表格的单元格添加填充

2 个答案: