在 React 和 tailwind 中的 Select 下拉列表中添加一個 header 和 flex 中的兩列

Question

是否可以在 select 下拉列表中添加兩列 header，如下圖所示？

我嘗試了幾種方法，但它沒有渲染。 這是我當前的代碼，沒有 header 和單個 timeslow 列

<select className='base mt-2 mx-auto' value={selectedTime} onChange={(e) => {setSelectedTime(e.target.value)}}>
{
 timeslots.timeInterval.map((data,i)=> <option key={i} value={data} 
 className={`${hideTimeSlot(data,1,timezone,selectedDate)}`}> 
 {formatAmPmTime(data)}</option>)
                }
  </select>

Answer 1

不支持像您嘗試那樣即時編譯順風類，這是行不通的。 除此之外，您不能使用任何類型的格式，例如您在option中嘗試執行的操作。 每個文檔允許的內容是： Text, possibly with escaped characters (like é). 所以在這種情況下，即使是造型也行不通。