How to make table head rounded edge in version 2.2 ??

How to make table head rounded edge in version 2.2 ??

pkiratpkirat Posts: 2Questions: 1Answers: 0
edited February 21 in Free community support

I achieved some level of round edge but couldn't make table border rounded :'( Please, refer the picture for actual requirement.

CSS:
$('.table.dataTable.table-sm > thead > tr th.dt-orderable-asc, ' +
'.table.dataTable.table-sm > thead > tr th.dt-orderable-none,' +
'table.dataTable.table-sm > thead > tr th.dt-orderable-desc, ' +
'table.dataTable.table-sm > thead > tr th.dt-ordering-asc').addClass('!bg-blue-500 text-white');

        $('.dataTable thead th:first-child').addClass('!border-1 !rounded-tl-lg');
        $('.dataTable thead th:last-child').addClass('!border-1 !rounded-tr-lg');

Answers

  • allanallan Posts: 64,016Questions: 1Answers: 10,555 Site admin
    table {
      border: 1px solid black;
      border-radius: 1em;
    }
    

    https://live.datatables.net/yinapiwe/1/edit ?

    Can you link to your test case showing the issue if that doesn't help.

    Allan

  • pkiratpkirat Posts: 2Questions: 1Answers: 0
    edited February 21

    thanks allan,

    Still not able to achieve rounded edges as achieved in your example. :(

    I'm new to CSS world especially Tailwindcss :) in fact the whole full stack world :)

    html+tailwind:
    <div class="flex w-full overflow-hidden"> <div class="container-fluid overflow-auto bg-gray-400 p-2"> <table id="studentTable" class="container-fluid table table-bordered border-black rounded-lg "> <thead class="h-12 align-middle text-md font-semibold "> <tr>
    ................... removed for brevity

    datatable initialization:
    $('#studentTable').DataTable({ dom: '<"top-container d-flex justify-content-between"<"float-start"f><"buttons-container"B>><"bottom"t><"pagination-container pt-1 d-flex justify-content-end"p>', buttons: [ { text: 'Add', className: 'btn btn-success rounded mb-2', action: function (e, dt, node, config) { window.addStudentDetails('', 'add'); }, }, ], info: false, paging: true, searching: true, searchable: true, responsive: true, lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]], pageLength: window.innerHeight > 800 ? 20 : 12, bProcessing: true, bServerSide: true, ajax: { url: '{!!route('students.index')!!}', });

  • allanallan Posts: 64,016Questions: 1Answers: 10,555 Site admin

    I'm happy to take a look at a test case showing the issue.

    Allan

Sign In or Register to comment.