Semua solusi Circle-Inside-Table-Cells Saya melihat mengharuskan saya untuk menentukan lebar dan ketinggian tabel, atau elemennya, dengan piksel. Saya cenderung menentukan ukuran tabel / tabel-elemen dengan persentase. Dengan begitu saya dapat mengharapkan pengguna untuk dapat mengecilkan jendela browser mereka dan semuanya menyesuaikan secara responsif.

Saya perlu lingkaran berwarna sempurna di dalam beberapa elemen tabel saya. Akan lebih baik jika ada teks yang berpusat di dalamnya, tetapi itu tidak penting dibandingkan dengan hanya memiliki lingkaran. Yang mengatakan, jika ada teks itu hanya akan menjadi beberapa karakter maks. Saya benar-benar hanya membutuhkan lingkaran sekarang dan saya menduga teksnya jauh lebih kompleks sehingga kita dapat mengabaikannya untuk saat ini, kecuali cukup mudah untuk dimasukkan.

Bagaimana saya bisa membuat lingkaran yang tetap bulat dan menyusut / berkembang sesuai dengan ketinggian apa pun yang tersedia ada di sel tabel? Jika sel meja lebar dan pendek, lingkaran akan memiliki lebih banyak ruang di kedua sisi, sebagai contoh, tetapi tetap bulat.

Saya sama sekali tidak menentang penggunaan SVG atau sesuatu yang serupa ... atau bahkan grafik ... jika itu membuat pekerjaan ini. Namun, tabel saya secara dinamis membuat bereaksi dan saya akan secara dinamis menerapkan kelas atau ID untuk menyebabkan lingkaran muncul dan menghilang. Jadi itu harus dimungkinkan, dan saya tidak yakin bagaimana itu akan bekerja dengan SVG atau yang setara atau grafik

0
THX1137 4 April 2021, 07:15

3 jawaban

Jawaban Terbaik

Ini dapat dilakukan dengan gambar latar belakang gradien radial menggunakan sisi terdekat untuk lingkaran.

background-image: radial-gradient(circle closest-side, red 0%, red 50%, transparent 50%, transparent 100%)

Inilah contoh sederhana:

body {
  width: 100vw;
  height: 100vh;
}
table {
  width: 30%;
  height: 40%;
}
td {
 background-color: pink;
}
td.circle {
  background-image: radial-gradient(circle closest-side, red 0%, red 50%, transparent 50%, transparent 100%);
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-color: cyan;
}
<table>
<tr>
<td>cell 1</td>
<td class="circle">cell 2</td>
<td>cell 3</td>
</tr>
</table>
2
A Haworth 4 April 2021, 06:53
function setCircles() {
  var bounding = document.getElementById("table").querySelector("td").getBoundingClientRect();
  
  var circles = document.querySelectorAll(".circle");
  if (bounding.width >= bounding.height) {
     for (var i = 0; i < circles.length; i++) {
      circles[i].style.width = bounding.height+"px";
      circles[i].style.height = bounding.height+"px";
     }
  } else if (bounding.width < bounding.height) {
    for (var i = 0; i < circles.length; i++) {
      circles[i].style.width = bounding.width+"px";
      circles[i].style.height = bounding.width+"px";
     }
  }
}
setCircles();
document.addEventListener("load", setCircles);
window.addEventListener("resize", setCircles);
#table {
  width: 200px;
  height: 400px;
}
.circle {
  border-radius: 5000px;
  background-color: #ff0000;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}
<table id="table">
  <tr>
    <td><div class="circle">text</div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
</table>
-1
Fakt309 4 April 2021, 04:25

Berikut ini akan membuat lingkaran sempurna 100% dari lebar.

Gaya CSS.

.container{
    position:relative;
    height: 100%;
    width:100%;
}
.circle{
    position:relative;
    border-radius:50%;
    width:100%;
    background:#000;
}

.circle:after{
    content: "";
    position:relative;
    display:block;
    width: 100%;
    padding-bottom: 100%;
}

Html.

<div class="container">
<div class="circle"></div>
</div>

Untuk 100% tinggi coba ini

CSS.

.container{
    position:relative;
    height: 100%;
    width:100%;
}

.circle {
  display: inline-block;
  border-radius:50%;
  overflow:hidden;
  height: 100%;
  background: #000;
}

Html.

<div class="container">
<div class="circle">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
</div>

</div>

https://jsfiddle.net/6hwdso4e/

Kemudian pastikan sel tabel Anda adalah posisi relatif.

0
Chris Kirby 4 April 2021, 04:41