html - 调整浏览器大小时文本重叠

Question

我之前就导航菜单问过这个问题。我收到的答案帮助我解决了这个问题（我不得不将px更改为％）
但是，将此修复程序应用于页面上的表时，它们不会被切断，但是当我调整浏览器大小时它们会重叠。

HTML：

<div class="Table">
        <object id="column1R">Born</object>
        <object id="column2R">Died</object>
        <object id="column3R">Spouse(s)</object>
        <object id="column4R">Occupation</object>

        <object id="answer1R">February 4, 1913</object>
        <object id="answer2R">October 24, 2005</object>
        <object id="answer3R">Raymond Parks</object>
        <object id="answer4R">Civil rights activist</object>
    </div>

CSS：

    #column1R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 28px;
    margin-top: 124px;
    margin-right: 23%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    text-align: center;
    width: 75px;
    float: right;

}

#answer1R {
    font-family: "serif"; 
    color: white;
    float: right;
    font-size: 28px;
    margin-top: 124px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 8px;
    height: 0px auto;
    min-height: 38px;
    width: 200px;
    text-align: center;
}

#column2R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 28px;
    margin-top: 172px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer2R {
    font-family: "serif"; 
    color: white;
    float: right;
    font-size: 28px;
    margin-top: 172px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 8px;
    height: 0px auto;
    min-height: 38px;
    width: 200px;
    text-align: center;
    font-size: 27px;
}

#column3R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 18px;
    margin-top: 220px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer3R {
    font-family: "serif"; 
    color: white;
    font-size: 18px;
    margin-top: 220px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 7px;
    height: 0px auto;
    min-height: 25px;
    width: 200px;
    text-align: center;
    float: right;
}

#column4R {
    font-family: "Bree Serif", "serif"; 
    color: white;
    font-size: 15px;
    margin-top: 254px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer4R {
    font-family: "serif"; 
    color: white;
    font-size: 18px;
    margin-top: 254px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 5px;
    height: 0px auto;
    min-height: 23px;
    width: 200px;
    text-align: center;
    float: right;
}

这是运行中的代码： https://codepen.io/anon/pen/BRpMRy

如果您调整浏览器的大小，则可以看到它们重叠。

如果有人可以提出解决方案，那就太好了，我们将不胜感激。

Answer 1

object标签定义HTML文档中的嵌入式对象。使用此元素可以在您的网页中嵌入多媒体（例如音频，视频，Java applet，ActiveX，PDF和Flash）。它还可以用于将另一个网页嵌入到HTML文档中。

我认为这更好！

<table>
  <tr>
      <td>Born</td><td>February 4, 1913</td>
  </tr>
  <tr>
      <td>Die</td><td>October 24, 2005</td>
  </tr>
  <tr>
     <td>Spouse(s)</td><td>Raymond Parks</td>
  </tr>
  <tr>
    <td>Occupation</td><td>Civil rights activist</td>
  </tr>
</table>