为什么我在JSFiddle上获得的结果不同于我自己的页面？

Question

我是JS的新手。

我想要的只是在我的数据周围有一个带有弯曲边框半径的边框。在JSFiddle我的代码工作。

Fiddle

＆＃13;

＆＃13;

cat > hw5_script
echo "Enter filename:"
read filename
echo "This is a file filename"

＆＃13;

$(".categories").on('change', function() {

  $("td.cat_products").append('<p> A Very Nice Value</p>').css({
    "background-color": "yellow",
    "border": "solid 1px lightblue",
    'border-radius': "30px"
  });
});

＆＃13;

＆＃13;

＆＃13;

但是在我的页面上，它有相同的代码，我得到一个完全不同的结果 - 见图像。您可以在我的页面上看到n是获得边框的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="categories"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <div class="table-responsive"> <table class="table table-striped"> <tr> <h4>Add A Product</h4> </tr> <tr> <td class="cat_products "></td> </tr> </table> </div>。我不在乎是<tr>还是<tr>我只想要一个弯曲半径的边框。我已经尝试了所有可以想象的border-radius组合。这让我发疯了！如何在页面上获得弯曲半径的漂亮边框？